I have an angular app. There are couple of pages where visible data available only for subscribers and not for free users.
There are couple solutions for this and I'm not sure which one is the appropriate:
Have one html page only (one component) can have two different divs, one with visible text (normal) and second with png files which include blur text.
Have one html page only (one component) and when the user is free user, use css the blur only the value of the field based on the user role.
Have two html files which mean two different angular components, one with png files (with blur text) and second component with normal visible text.
What is my main concern
A free user is going to the page, inspect elements and remove the css class which responsible for making the text to be blurred.
I need to guide the frontend development team on which direction to go, can you help with this?
As you explained in your question correctly, the user always has access to the dev tools and as such can inspect all elements and manipulate them. You can make it harder for a user to inspect elements or try to uglify them, but a smart user can intercept that as well.
Websites work through GET requests. A user types in an URL and the browser will request to GET a document. The web server then will resolve the request by sending a document to the browser that will keep a copy of that document in the cache. At that point, you have no further control of that document and the user can do with it whatever he likes. He can inspect the content or the source code itself.
If you keep the process in mind you will understand, that the only way in protecting content is by blocking the request. That has to be done server-sided. In particular, you have to block unauthorized users from receiving confidential content in the first place.
While using images might sound smart, you have to note that images have two major downsides.
They missing accessibility and responsiveness!
The text on an image can not be read by screen readers. For that, you need an alt attribute which again comes back to the point that it can be accessed by everyone.
For responsiveness it is to note that a low-resolution image will work well on low-resolution screens but terrible on high-resolution screens where the text thanks to the stretching is pixelated and no more readable. The other way around would allow readability in most cases but the image size will be not user friendly. With mobile internet speed, you might take a long time to download the image while also costing valuable limited high-speed traffic.
Using a preview is common for articles and newspapers. There you will send a limited amount of the article to the free user as a teaser while cutting the rest on the backend and working with a gradient blur (linear-gradient with colors with alpha values such as rgba or hsla) to hide the non-existing content (the content that is not sent by the server).
section {
width: 10em;
height: 20em;
border: 2px dashed red;
padding: 0.5em;
position: relative;
}
section::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 100;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 20%);
}<section>
<!-- Actual text from the restricted content -->
<p>This is just a preview text which will be blurred after some text.</p>
<!-- Text will not actually be delivered and as such also not be within the DOM -->
<p>This Text will not be existing while it does not matter because the reader wouldn't be able to see it anyways.</p>
</section>This has the advantage that the user gets a teaser and is more likely to be pushed to pay a membership to keep reading. It also works perfectly with screenreaders while you should add a screenreader-only text to explain that further content is only visible with a membership.
You could also send a fake text but I would not recommend it. Sending a teaser is more likely in generating more memberships while the fake text is needed traffic (useability concerns for users with limited mobile internet).