HTML CSS Blur Text with no visibility in source code

Question

HTML CSS combo can be used to "blur" the text or image, when displayed in Browsers.

.blur {
  filter: blur(3px);
}

<div class="blur">Hello How are You?</div>

However, the text is still visible and accessible clearly when someone goes to view-source or inspect-element in the browsers.

Is there any additional way in which the text becomes completely invisible/inaccessible even in view-source or inspect-element ?

This is for an online quiz for 20 questions, where few sample questions (say 4) are clearly visible (both q&a), but rest 16 q&a are blurred or inaccessible. Now, my aim is to have all the 20 questions accessible to Search engines like Google and paid subscribers, but only 4 to free site visitors. Hence, the q.

[.remove()](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) JS must be used. — Simone Rossaini, Aug 09 '22 at 13:08
If you don't want your text to be viewed in the source code, you shouldn't print the text at all. CSS can't delete stuff from your source code, that's not what CSS is for. — DeltaG, Aug 09 '22 at 13:09
Why put the text there if you don't want people to see it? Use dummy text if you want something to be present — Huangism, Aug 09 '22 at 13:10
To be completely safe from people reading the text, it should never be sent from the server. — Kokodoko, Aug 09 '22 at 13:13
@Huangism - this is for an online quiz for 20 questions, where few sample questions (say 4) are clearly visible (both q&a), but rest 16 q&a are blurred or inaccessible. Now, my aim is to have all the 20 questions accessible to Search engines like Google and paid subscribers, but only 4 to free site visitors. Hence, the q. (Also updated the main q with this info) — Aquaholic, Aug 09 '22 at 13:35
_"Now, my aim is to have all the 20 questions accessible to Search engines like Google and paid subscribers, but only 4 to free site visitors."_ - utterly annoying, when you make me "find" stuff in the first place, only to then tell me that I do not have access to it, until I pay. Might even be tempted to report such sites to Google for cheating. — CBroe, Aug 09 '22 at 13:54
@CBroe - appreciate your concerns. But that's what the project owners need. I am a mere programmer in the whole chain who looking for completing the programming part. Similar to what many News sites do. — Aquaholic, Aug 09 '22 at 15:15
AFAIK Google goes through websites not only as GoogleBot, but also as a normal user with a different user agent string. If there are distinct differences this might rank you down eventually when their algorithm becomes wise to it. Also, text which is obfuscated by CSS can still be copy&pasted easily. Even if you disable clicking on elements people can `Ctrl+A`, `Ctrl+C` even without developer knowledge. — Peter Krebs, Aug 11 '22 at 11:45

score 2 · Accepted Answer · answered Aug 11 '22 at 11:22

Do note - in the context of the question, "blur" tag may not be fully useful. Because it simply blurs the text. If someone copies that blurred text and paste it in Notepad, it will be visible clearly.

In the given situation, one of the solution is to use a combo of (1) keep dummy questions for those you want to hide, and (2) also blur them as above.

As most of the quiz takers may not be aware of blur shortfalls (& may not take the efforts to copy-paste blurred text to Notepad), blur alone will work. For those who do copy-paste, the dummy questions will make it useless. However, you will need to put in efforts to draft the dummy questions to match the topic for search engines to make it contextual.

Another option is to use AJAX. It allows for pulling selective content from the server based on condition (like button click, or check for logged in users). Lots of examples available on w3schools for selective rendering.

score 1 · Answer 2 · answered Aug 09 '22 at 13:16

1

if you are building a quiz of some sort, and don't want people be able to cheat by looking at the solution in the source code you could try tow followin two ideas:

have the solution in the browser, but obfuscated in some way
load the solution from the server when you want to show it, using fetch

answered Aug 09 '22 at 13:16

bjelli

9,752
4
35
50

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/32445342) – rgettman Aug 09 '22 at 22:29

HTML CSS Blur Text with no visibility in source code

2 Answers2