reactjs - Anyone can fetch my blog posts using my GET end-points and use them on his own site? Is there a way to protect this?

Question

I have a blogging app built on top of the MERN Stack. I am fetching my blog posts on the react front-end, however, I feel anyone can use my blog posts on his own site by hitting the same end-point. I want to protect this behaviour. Is there a way?

question from:https://stackoverflow.com/questions/66066283/anyone-can-fetch-my-blog-posts-using-my-get-end-points-and-use-them-on-his-own-s

Answer 1

If, for some reason, it isn't enabled already, make sure your endpoints have standard Access-Control-Allow-Origin restrictions - that is, that they only permit direct connections from your domain, not from other sites. This will make it slightly more difficult for other sites to scrape yours, because they won't be able to make requests directly from the frontend.

You could also change your application structure so that the blog data gets sent with the initial HTML response. For a small example, you could have

<script type="application/json" class="blog-data">
[{"title":"some post title", "content":"some content"}]
</script>

const blogData = JSON.parse(document.querySelector('.blog-data').textContent);

This will also make it a bit harder for a scraper to work - they won't have an endpoint ready to serve the plain blog data, they'll have to parse through your HTML response first.

You could also frequently change up the DOM structure of the data in the HTML response to make it harder.

But web scraping is fundamentally nearly impossible to stop, for someone who's determined enough.