Text content rendering component and method for defending page text extraction

Abstract

The invention provides a text content rendering component for defending page text extraction. The text content rendering component comprises an html tag and a native tag, the native tag is provided with a CSS pseudo element and a self-defined data-* attribute; the native tag is used for hijacking the text content transmitted into the html tag, and temporarily storing the hijacked text content in the self-defined data-* attribute of the native tag in a data-* form; and the CSS pseudo element of the native tag is used for reading the text content in the data-* form in the data-* attribute, assigning the read text content in the data-* form to the content attribute of the CSS pseudo element, and rendering the text content in the data-* form in a CSS style. According to the method, the text content is not rendered in the html label in a text information rendering mode, but is rendered in the CSS pseudo element of the original label in a CSS style graphic technology mode, so that a crawler program cannot predict the text content, and the text content cannot be selected and copied.

Description

Technical Field

[0001] The present invention relates to the field of computer processing technology, and in particular to a text content rendering component and method for preventing page text extraction. Background Art

[0002] In the design of B / S architecture, HTML is a standard markup language used to create web pages. It defines the structure and presentation of web pages in the form of tags, and text information is wrapped in tags so that it can be read, interpreted and rendered into pixel information by the browser. For example: This is a text message Generally speaking, these text information can be copied freely by users and read by crawlers.

[0003] If you only want users to view these text information pages but not to copy them, the current mainstream solutions are as follows:

[0004] 1. Use javascript to disable the copy, cut events, right-click menu, etc. of the web page. For example:

[0005] / / Disable right click menu

[0006] document.oncontextmenu=function(){return false;};

[0007] / / Disable text selection

[0008] document.onselectstart=function(){return false;};

[0009] / / No copying

[0010] document.oncopy=function(){return false;};

[0011] / / Disable cutting

[0012] document.oncut=function(){return false;}.

[0013] 2. The second method is implemented by HTML tag attributes. For example:

[0014] <body

[0015] oncopy="return false"

[0016] oncut = "return false;"

[0017] onselectstart="return false"

[0018] oncontextmenu="return false"><! --……-->.

[0019] 3. The third method is to disable through Cascading Style Sheets (CSS styles). For example:

[0020] body{

[0021] -moz-user-select:none; / *Firefox private property* /

[0022] -webkit-user-select:none; / *WebKit kernel private properties* /

[0023] -ms-user-select:none; / *IE private property (IE10 and later)* /

[0024] -khtml-user-select:none; / *KHTML kernel private attributes* /

[0025] -o-user-select:none; / *Opera private attribute* /

[0026] user-select:none; / *CSS3 properties* / }.

[0027] The above three methods are all provided in the W3C standard, so they are easily targeted by various cracking programs.

[0028] Regarding the first method: General unblocking plug-ins will rewrite these 4 global methods or even directly disable JavaScript to make it invalid.

[0029] For the second method: you can still make it invalid by rewriting the 4 methods on the body or even directly disabling JavaScript.

[0030] For the third method: you need to reset these CSS styles. Since this is the official solution, almost all cracking plug-ins support this cracking method.

[0031] The above three methods cannot defend against crawlers. Crawlers will bypass the browser and directly obtain text data by reading the HTML source file and the tag content.

[0032] For developers, CSS is written in style iteration files, which are static declarations and are generally stored in *.css files. Text information is written in the form of html tags, such as: <text> This is a text< / text> The writing methods of the two are very different, and a CSS style can be applied to multiple different tags, and the text information is also different, so the text information cannot be hard-coded directly in CSS, but there must be a way to dynamically obtain it. And the development model cannot change too much because of the defense text extraction, which will increase the development cost. Summary of the invention

[0033] The present invention proposes a text content rendering component and method for defending against page text extraction, so as to solve the technical problem that the page text content cannot defend against crawler programs, and the crawler programs bypass the browser and directly read the HTML source file.

[0034] One aspect of the present invention is to provide a text content rendering component for preventing page text extraction, the text content rendering component comprising:

[0035] html tags and native tags; the native tags set CSS pseudo elements and custom data-* attributes;

[0036] Native tag, hijacks the text content passed into the html tag, and temporarily stores the hijacked text content in the custom data-* attribute of the native tag in the form of data-*;

[0037] The CSS pseudo-element of the native tag is used to read the text content in the data-* format in the data-* attribute;

[0038] Furthermore, the read text content in the data-* format is assigned to the content attribute of the CSS pseudo-element, and the text content in the data-* format is rendered in a CSS style.

[0039] In some preferred embodiments, the text content rendering component is encapsulated in a Vue framework, including:

[0040] Configuring a slot in the html tag, the slot being used to carry text content passed into the html tag;

[0041] Get the text content passed into the html tag through the useSlots() function, and use the ref() function to create a responsive variable canRender to block the rendering of the passed text content by the html tag;

[0042] Add CSS classes to native tags to give them CSS pseudo-elements.

[0043] In some preferred embodiments, the text content rendering component is encapsulated in a React framework, including:

[0044] Use the React library to define a function component named Text and create the html tag and the native tag;

[0045] The function component named Text includes a children parameter for carrying the text content passed into the html tag, and returns a JSX expression containing the native tag;

[0046] Add CSS classes to native tags, thereby giving them CSS pseudo-elements;

[0047] Among them, the function component named Text hijacks the text content of the incoming html tag in the form of attribute binding through the JSX expression of the native tag, and temporarily stores the hijacked text content in the data-* attribute of the native tag in the form of data-*.

[0048] In some preferred embodiments, the text content renderer component further includes:

[0049] The line break display module is used to render the text content in the data-* format in CSS style and then display it in line breaks.

[0050] Another aspect of the present invention is to provide a text content rendering method for preventing page text extraction, the text content rendering method comprising the following method steps:

[0051] Create html tags and native tags; set CSS pseudo elements and custom data-* attributes for the native tags;

[0052] Hijack the text content of the incoming html tag, and temporarily store the hijacked text content in the data-* attribute of the native tag in the form of data-*;

[0053] The CSS pseudo-element of the native tag reads the text content in the data-* format in the data-* attribute;

[0054] Furthermore, the read text content in the data-* format is assigned to the content attribute of the CSS pseudo-element, and the text content in the data-* format is rendered in a CSS style.

[0055] In some preferred embodiments, the text content rendering method is implemented with a Vue framework, including:

[0056] Configuring a slot in the html tag, the slot being used to carry text content passed into the html tag;

[0057] Get the text content passed into the html tag through the useSlots() function, and use the ref() function to create a responsive variable canRender to block the rendering of the passed text content by the html tag;

[0058] Add CSS classes to native tags to give them CSS pseudo-elements.

[0059] In some preferred embodiments, the text content rendering method is implemented using a React framework, including:

[0060] Use the React library to define a function component named Text and create the html tag and the native tag;

[0061] The function component named Text includes a children parameter for carrying the text content passed into the html tag, and returns a JSX expression containing the native tag;

[0062] Add CSS classes to native tags, thereby giving them CSS pseudo-elements;

[0063] Among them, the function component named Text hijacks the text content of the incoming html tag in the form of attribute binding through the JSX expression of the native tag, and temporarily stores the hijacked text content in the data-* attribute of the native tag in the form of data-*.

[0064] In some preferred embodiments, the text content rendering method further includes:

[0065] The text content in the data-* format is rendered with CSS style and displayed in a line break.

[0066] Compared with the prior art, the present invention has the following beneficial effects:

[0067] The present invention proposes a text content rendering component and method for preventing page text extraction. When the text content is passed into the html tag, it is hijacked by the data-* attribute customized by the native tag, preventing the text content from being inserted into the html tag and temporarily stored in the customized data-* attribute. The text content is not rendered in the html tag in the way of text information rendering, but is rendered in the CSS pseudo-element of the native tag in the way of CSS style graphics technology. The customized data-* attribute for temporarily storing the text content can be any random characters, so that the crawler program cannot predict the text content, so that the text content cannot be selected or copied. At the same time, the text content is not affected by the disabling of javascript.

[0068] The present invention proposes a text content rendering component and method for defending against page text extraction, which can effectively defend against the technical problem that the current page text content cannot defend against crawler programs, which bypass the browser and directly read the HTML source file to extract the page text content.

[0069] The present invention proposes a text content rendering component and method for preventing page text extraction. The text content cannot be copied or dragged in the browser. All means of breaking restrictions by disabling javascript will be invalid. The crawler program will not be able to read text information from the HTML content, and the general crawler processing logic will be prevented. The present invention dynamically switches the attribute name so that the crawler program cannot accurately locate the text information position.

[0070] The present invention proposes a text content rendering component and method for preventing page text extraction, which supports most CSS styles and is similar to ordinary HTML tags in use. It is developer-friendly and does not require more learning costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0071] In order to more clearly illustrate the specific implementation of the present invention or the technical solution in the prior art, the following briefly introduces the drawings required for use in the specific implementation or the prior art description. Obviously, the drawings described below are some implementations of the present invention, and for ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0072] Figure 1 It is a structural block diagram of a text content rendering component for defending against page text extraction according to the present invention. DETAILED DESCRIPTION

[0073] In order to make the above and other features and advantages of the present invention more clear, the present invention is further described below in conjunction with the accompanying drawings. It should be understood that the specific embodiments given herein are for the purpose of explaining to those skilled in the art and are only exemplary and not restrictive.

[0074] Combination Figure 1 According to an embodiment of the present invention, a text content rendering component 100 for defending against page text extraction is provided. The text content rendering component 100 includes:

[0075] The html tag 101 and the native tag 102. The native tag 102 sets a CSS pseudo element 1021 and a custom data-* attribute 1022.

[0076] The native tag 102 hijacks the text content passed into the html tag 101 , and temporarily stores the hijacked text content in the custom data-* attribute 1022 of the native tag 102 in the form of data-*.

[0077] The CSS pseudo-element 1021 of the native tag 102 is used to read the text content in the data-* format in the data-* attribute 1022, and assign the read text content in the data-* format to the content attribute of the CSS pseudo-element 1021, and render the text content in the data-* format in CSS style.

[0078] Furthermore, the text content rendering component 100 also includes: a line break display module, which is used to render the text content in the data-* format in a CSS style and then display it in a line break.

[0079] When the text content of the present invention is passed into the html tag 101, it is hijacked by the custom data-* attribute 1022 of the native tag 102, preventing the text content from being inserted into the html tag 101 and temporarily stored in the custom data-* attribute 1022. The text content is not rendered in the html tag 101 as text information, but is rendered in the CSS pseudo-element 1021 of the native tag 102 as a CSS-style graphic technology.

[0080] The text content of the present invention is not rendered in the html tag 101, and the custom data-* attribute 1022 for temporarily storing the text content can be any random characters, so that the crawler program cannot predict the text content, so that the text content cannot be selected or copied. At the same time, the text content is not affected by the disabling of javascript.

[0081] Embodiment 1.

[0082] In this embodiment, a text content rendering component 100 for preventing page text extraction provided by the present invention is encapsulated in a Vue framework.

[0083] Specifically, a slot is configured in the html tag 101 , and the slot is used to carry the text content passed into the html tag 101 .

[0084] The text content of the passed html tag 101 is obtained through the useSlots() function, and the ref() function is used to create a responsive variable canRender to block the rendering of the passed text content by the html tag 101.

[0085] A CSS class is added to the native tag 102 , thereby giving the native tag a CSS pseudo element 1021 . A data-* attribute 1022 is customized in the native tag 102 .

[0086] In one embodiment, the text content rendering component 100 for preventing page text extraction of the present invention is encapsulated in a Vue framework and implemented as follows:

[0087] <template>

[0088]

[0089] <slotv-if="canRender"> .

[0090] Code explanation: Creating an HTML tag 101 ( ), in HTML Tag 101 ( ) configuration slots ( <slot>). Slot( <slot>) is used to carry the incoming HTML tag 101 ( )'s text content.

[0091] Slot( <slot>)Determines whether to render the incoming HTML tag 101 according to the responsive variable canRender ( ). In this embodiment, the text content is made invisible on the page forever through the v-if instruction.

[0092]

[0093] Code explanation: Create a native tag 102 ( ), for native tag 102( ) adds a CSS class called text-pre to the native tag 102 ( ) is assigned to the CSS pseudo element 1021. In the native tag 102( ) sets a custom data-* attribute 1022 (data-text attribute) through data-text, hijacks the text content passed into the html tag 101 through data-text="text", and temporarily stores the hijacked text content in the custom data-* attribute 1022 (data-text attribute) of the native tag 102 in the form of data-*.

[0094] In this embodiment, in the native tag 102 ( ) adds a CSS class named text-pre, which contains a style rule of display:'inline-block', so that the CSS pseudo-element 1021 renders the text content according to the style rule of display:'inline-block'.

[0095] <script setup>

[0096] import{useSlots,ref}from'vue'；

[0097] const canRender＝ref(false)；

[0098] const slots＝useSlots()；

[0099] const[{text}]＝slots.default()；

[0100] 代码解释：在脚本部分(<script setup>)，本实施例使用Vue框架提的API接口引入功能函数，通过useSlots()函数获取传入html标签101的文本内容(插槽(<slot>)中承载的文本内容)，并使用ref()函数创建响应式变量canRender。ref()函数的值永远为false，从而屏蔽html标签101对文本内容的渲染。

[0101] 本实施例，通过slots.default()函数对文本内容的第一个元素解构赋值给变量‘text’。

[0102]

[0103] 代码解释：本实施例中原生标签102()添加名为text-pre的CSS类设置伪元素‘::before’的样式。CSS伪元素1021通过content:attr(data-text)读取data-*属性1022中的data-*形式的文本内容(data-text属性中的文本内容)，并且将读取的data-*形式的文本内容赋值给CSS伪元素1021的content属性。CSS伪元素1021的content属性，对data-*形式的文本内容(data-text属性中的文本内容)以CSS样式渲染。

[0104] 由于在html标签101对文本内容在进行渲染时(本发明html标签101不对文本内容渲染)会自动处理换行。本实施例中，通过white-space:pre-wrap设置换行显示模块，用于对data-*形式的文本内容以CSS样式渲染后，进行换行显示。

[0105] 实施例二。

[0106] 本实施例中，本发明提供的一种防御页面文本抽取的文本内容渲染组件100以React框架封装。

[0107] 具体地，使用React库定义名为Text的函数组件，创建所述html标签和所述原生标签。

[0108] 其中，名为Text的函数组件，包括用于承载传入html标签101的文本内容的children参数，以及返回包含原生标签102的JSX表达式。

[0109] 对原生标签102添加CSS类，从而对原生标签102赋予CSS伪元素1021。通过原生标签102的JSX表达式设置原生标签102的自定义data-*属性1022。

[0110] 其中，名为Text的函数组件，通过原生标签的JSX表达式，以属性绑定的方式劫持传入html标签101的文本内容，并将劫持的文本内容以data-*形式暂存在原生标签102的data-*属性中。

[0111] 在一个实施例中，本发明一种防御页面文本抽取的文本内容渲染组件100以React框架封装实现代码如下：

[0112]

[0113] 代码解释：使用React库定义名为Text的函数组件，名为Text的函数组件包括承载文本内容的children参数和其他属性(通过展开操作符'...others'实现的其他属性)。children参数用于承载传入的文本内容，实现创建html标签101。

[0114] 名为Text的函数组件返回一个含原生标签102()的JSX表达式，实现创建原生标签102。

[0115] 原生标签102()的JSX表达式<div className＝"TextArea"data-text＝{children}{...others}>中，设置原生标签102的自定义data-*属性1022(data-text属性)。

[0116]

[0117]

[0118] 代码解释：本实施例中，CSS样式部分采用SCSS语法来编写。定义名为text-pre的CSS类，对原生标签102()赋予CSS伪元素1021。名为text-pre的CSS类，包含一个display:'inline-block'的样式规则，使CSS伪元素1021按照display:'inline-block'的样式规则对文本内容进行渲染。本实施例中名为text-pre的CSS类设置伪元素‘::before’的样式。

[0119] 本实施例中，名为Text的函数组件，通过原生标签的JSX表达式<div className＝"TextArea"data-text＝{children}{...others}>具有类名TextArea，将类名TextArea与自定义data-*属性1022(data-text属性)绑定。

[0120] 原生标签的JSX表达式<div className＝"TextArea"data-text＝{children}{...others}>以属性绑定的方式劫持传入html标签101的文本内容(children参数承载的文本内容)，屏蔽html标签101对文本内容的渲染(屏蔽children参数对文本内容的渲染)，并将劫持的文本内容以data-*形式暂存在原生标签102的data-*属性1022(data-text属性)中。

[0121] CSS伪元素1021通过content:attr(data-text)读取data-*属性1022中的data-*形式的文本内容(data-text属性中的文本内容)，并且将读取的data-*形式的文本内容赋值给CSS伪元素1021的content属性。CSS伪元素1021的content属性，对data-*形式的文本内容(data-text属性中的文本内容)以CSS样式渲染。

[0122] 由于在html标签101对文本内容在进行渲染时(本发明html标签101不对文本内容渲染)会自动处理换行。本实施例中，通过white-space:pre-wrap设置换行显示模块，用于对data-*形式的文本内容以CSS样式渲染后，进行换行显示。

[0123] 本发明在使用中开发人员可像普通标签的编写方式一样使用标签内容承载文本内容，不会有额外的成本，此组件会自动将文本内容做防御处理。

[0124] 例如：

[0125] <text-wrap>

[0126] Loremipsumdolorsitamet,consecteturadipiscingelit.Duisin pharetrametus.Nuncutsuscipitlacus,accommodopurus.Etiam tristiqueurnaeros,ornareaccumsanexullamcorpervel.Maurissitamet conguemagna.Curabitursagittiserosvelnisiblanditpretium.Sedet iaculisaugue.Morbidictumdignissimtortoridpulvinar.Vestibulumvitae lacusnoneratvestibulumporta.Curabiturquisvelitinorcimaximusmollis.Aliquambibendum,magnasitametullamcorpermolestie,dui arcueuismodmetus,sedmollismauriseratnonurna.Sedplaceratligula egetaliquamconsectetur.Aeneannoneuismodturpis.Vivamusacerateu nibhfeugiatsodalesutaterat.

[0127] < / text-wrap>。

[0128] 本发明文本内容在传入html标签101时，被原生标签102自定义的data-*属性1022劫持，阻止文本内容插入html标签101，暂存在自定义的data-*属性1022中，文本内容不在html标签101中以文本信息渲染的方式进行渲染，而是在原生标签102的CSS伪元素1021中以CSS样式的图形技术方式进行渲染。

[0129] 本发明文本内容不在html标签101渲染，暂存文本内容的自定义data-*属性1022可以是任意随机字符，使得爬虫程序无法预测文本内容，从而使文本内容无法被选中、复制。同时文本内容也不受javascript禁用的影响。

[0130] 根据本发明的实施例，提供一种防御页面文本抽取的文本内容渲染方法，包括如下方法步骤：

[0131] 创建html标签101和原生标签102；对原生标签101设置CSS伪元素1021和自定义的data-*属性1022。

[0132] 劫持传入html标签101的文本内容，并将劫持的文本内容以data-*形式暂存在原生标签102的data-*属性1022中。

[0133] 原生标签102的CSS伪元素1021，读取所data-*属性1022中的data-*形式的文本内容，并且将读取的data-*形式的文本内容赋值给CSS伪元素1021的content属性，对data-*形式的文本内容以CSS样式渲染。

[0134] 文本内容渲染方法还包括：对data-*形式的文本内容以CSS样式渲染后，进行换行显示。

[0135] 在一个实施例中，文本内容渲染方法以Vue框架实现，包括：

[0136] 在html标签101内配置插槽，插槽101用于承载传入html标签101的文本内容。

[0137] 通过useSlots()函数获取传入html标签101的文本内容，并使用ref()函数创建响应式变量canRender，屏蔽html标签101对传入文本内容的渲染。

[0138] 对原生标签添加CSS类，从而对原生标签赋予CSS伪元素。在原生标签102中自定义data-*属性1022。

[0139] 在另一个实施例中，文本内容渲染方法以React框架实现，包括：

[0140] 使用React库定义名为Text的函数组件，创建html标签101和原生标签102。

[0141] 其中，名为Text的函数组件，包括用于承载传入html标签101的文本内容的children参数，以及返回包含原生标签102的JSX表达式。

[0142] 对原生标签102添加CSS类，从而对原生标签102赋予CSS伪元素1021。通过原生标签102的JSX表达式设置原生标签102的自定义data-*属性1022。

[0143] 其中，名为Text的函数组件，通过原生标签102的JSX表达式，以属性绑定的方式劫持传入html标签101的文本内容，并将劫持的文本内容以data-*形式暂存在原生标签102的data-*属性中。

[0144] 尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。< / script> < / slot> < / slot> < / slot> < / template>

Claims

1. A text content rendering component for preventing page text extraction, characterized in that: The text content rendering component includes: html tags and native tags; the native tags set CSS pseudo elements and custom data-* attributes; Native tag, hijacks the text content passed into the html tag, and temporarily stores the hijacked text content in the custom data-* attribute of the native tag in the form of data-*; The CSS pseudo-element of the native tag is used to read the text content in the data-* format in the data-* attribute; Furthermore, the read text content in the data-* format is assigned to the content attribute of the CSS pseudo-element, and the text content in the data-* format is rendered in a CSS style.

2. The text content rendering component according to claim 1, characterized in that: The text content rendering component is encapsulated in the Vue framework, including: Configuring a slot in the html tag, the slot being used to carry text content passed into the html tag; The text content passed into the html tag is obtained through the useSlots() function, and the responsive variable canRender is created using the ref() function to block the rendering of the passed text content by the html tag; Add CSS classes to native tags to give them CSS pseudo-elements.

3. The text content rendering component according to claim 1, characterized in that: The text content rendering component is encapsulated in the React framework and includes: Use the React library to define a function component named Text, and create the html tag and the native tag; The function component named Text includes a children parameter for carrying the text content passed into the html tag, and returns a JSX expression containing the native tag; Add CSS classes to native tags, thereby giving them CSS pseudo-elements; Among them, the function component named Text hijacks the text content of the incoming html tag in the form of attribute binding through the JSX expression of the native tag, and temporarily stores the hijacked text content in the data-* attribute of the native tag in the form of data-*.

4. The text content rendering component according to claim 1, characterized in that: The text content rendering component also includes: The line break display module is used to render the text content in the data-* format in CSS style and then display it in line breaks.

5. A text content rendering method for preventing page text extraction, characterized in that: The text content rendering method comprises the following method steps: Create html tags and native tags; set CSS pseudo elements and custom data-* attributes for the native tags; Hijack the text content of the incoming html tag, and temporarily store the hijacked text content in the data-* attribute of the native tag in the form of data-*; The CSS pseudo-element of the native tag reads the text content in the data-* format in the data-* attribute; Furthermore, the read text content in the data-* format is assigned to the content attribute of the CSS pseudo-element, and the text content in the data-* format is rendered in a CSS style.

6. The text content rendering method according to claim 5, characterized in that: The text content rendering method is implemented with the Vue framework, including: Configuring a slot in the html tag, the slot being used to carry text content passed into the html tag; Get the text content passed into the html tag through the useSlots() function, and use the ref() function to create a responsive variable canRender to block the rendering of the passed text content by the html tag; Add CSS classes to native tags to give them CSS pseudo-elements.

7. The text content rendering method according to claim 5, characterized in that: The text content rendering method is implemented using the React framework, including: Use the React library to define a function component named Text and create the html tag and the native tag; The function component named Text includes a children parameter for carrying the text content passed into the html tag, and returns a JSX expression containing the native tag; Add CSS classes to native tags, thereby giving them CSS pseudo-elements; Among them, the function component named Text hijacks the text content of the incoming html tag in the form of attribute binding through the JSX expression of the native tag, and temporarily stores the hijacked text content in the data-* attribute of the native tag in the form of data-*.

8. The text content rendering method according to claim 5, characterized in that: The text content rendering method also includes: The text content in the data-* format is rendered with CSS style and displayed in a line break.

Images