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.

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
– DeltaG, Commented Aug 9, 2022 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
– Huangism, Commented Aug 9, 2022 at 13:10
To be completely safe from people reading the text, it should never be sent from the server. — Kokodoko
– Kokodoko, Commented Aug 9, 2022 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
– Aquaholic, Commented Aug 9, 2022 at 13:35

levent001 · Accepted Answer · 2022-08-11 11:22:25Z

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.

bjelli · Accepted Answer · 2022-08-09 13:16:36Z

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 9, 2022 at 13:16

bjelli

10.1k4 gold badges38 silver badges53 bronze badges

1 Comment

rgettman Over a year ago

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

Collectives™ on Stack Overflow

HTML CSS Blur Text with no visibility in source code

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related