英文:
How to implement blurry text in web page correctly in term of security?
问题
-
有一个角度应用程序。有几个页面,只有订阅者才能看到可见数据,免费用户不能。
-
有几种解决方案,我不确定哪一个是合适的:
-
只有一个HTML页面(一个组件)可以有两个不同的div,一个带有可见文本(正常),第二个带有包含模糊文本的png文件。
-
只有一个HTML页面(一个组件),当用户是免费用户时,使用CSS仅模糊基于用户角色的字段的值。
-
有两个HTML文件,意味着两个不同的角度组件,一个带有png文件(带有模糊文本),第二个组件带有正常可见文本。
我的主要关切是
一个免费用户将会进入页面,检查元素并移除负责使文本模糊的CSS类。
我需要引导前端开发团队选择哪个方向,你能帮忙吗?
英文:
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?
答案1
得分: 1
正如您在问题中正确解释的那样,用户始终可以访问开发工具,因此可以检查所有元素并操纵它们。您可以使用户更难以检查元素或尝试使其混淆,但聪明的用户也可以拦截它。
网站通过GET请求工作。用户在URL中键入URL,浏览器将请求GET文档。然后,Web服务器将通过向浏览器发送文档来解决请求,浏览器将在缓存中保存该文档的副本。在这一点上,您无法进一步控制该文档,用户可以按自己的意愿处理它。他可以检查内容或源代码本身。
如果您牢记这个过程,您会理解,保护内容的唯一方法是阻止请求。这必须在服务器端完成。特别是,您必须阻止未经授权的用户首先接收机密内容。
选项
1. 使用图像
尽管使用图像可能听起来很聪明,但您必须注意图像有两个主要缺点。<br> 它们缺少可访问性和响应性!
图像上的文本无法被屏幕阅读器读取。为此,您需要一个alt
属性,再次回到可以被所有人访问的观点。
对于响应性,值得注意的是,低分辨率图像在低分辨率屏幕上效果良好,但在高分辨率屏幕上效果糟糕,文字由于拉伸而呈像素化,不再可读。反之也是如此,大多数情况下可以保证可读性,但图像大小不友好。随着移动互联网速度,您可能需要很长时间才能下载图像,同时还会消耗宝贵的有限高速流量。
2. 使用预览
使用预览在文章和报纸中很常见。在这里,您将以预告的方式向免费用户发送文章的有限内容,同时在后端裁剪其余内容,并使用渐变模糊(使用alpha值的颜色的linear-gradient
或rgba
或hsla
)隐藏不存在的内容(服务器未发送的内容)。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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%);
}
<!-- language: lang-html -->
<section>
<!-- 实际受限内容中的文本 -->
<p>这只是一个预览文本,在一些文本后将被模糊。</p>
<!-- 实际上文本将不会被传递,因此也不会存在于DOM中 -->
<p>这段文字将不会存在,尽管无所谓,因为读者无论如何都看不到它。</p>
</section>
<!-- end snippet -->
这样做的好处是用户会得到一个预告,并更有可能被推动支付会员费来继续阅读。它也与屏幕阅读器完美配合,同时您应该添加一个仅供屏幕阅读器使用的文本,以解释只有通过会员才能看到进一步内容。
您也可以发送一个虚假文本,但我不建议这样做。发送一个预览更有可能产生更多的会员,而虚假文本需要不必要的流量(对于具有有限移动互联网的用户来说,这会带来可用性问题)。
英文:
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.
Options
1. Using Images
While using images might sound smart, you have to note that images have two major downsides. <br>
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.
2. Using a preview
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).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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%);
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论