Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Hiding website HTML content when doing inspect and view source

Avatar

Level 4

Hello,

 

 

I was trying to load a website page using https://safe.menlosecurity.com/ , noticed that in the view source and also on inspecting the page
it shows html content of only https://safe.menlosecurity.com/ and not of website page, but loads the page of the website and cannot see any html traces of website code.

On seeing the view of https://safe.menlosecurity.com/ found tags like

<safeview-info>
<sv-template>
<script>

Could you please provide inputs as how could this be achieved?? In case we want to see the website page html using https://safe.menlosecurity.com/
How to do it??


Thanks,
Srinivas

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Srinivas_Opti 
I think you are referring to use web components instead of plain HTML?

 

Web Components are a set of standardized technologies that allow you to create reusable, encapsulated custom HTML elements. They consist of four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules. Custom Elements enable you to define new HTML tags, Shadow DOM provides encapsulation to keep styles and scripts private, HTML Templates allow you to define reusable HTML fragments, and ES Modules provide a modular approach to JavaScript. Together, these technologies enable developers to create components that can be used across different web projects, promoting code reusability and maintainability.

 

https://www.webcomponents.org/introduction  



Arun Patidar

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @Srinivas_Opti 
I think you are referring to use web components instead of plain HTML?

 

Web Components are a set of standardized technologies that allow you to create reusable, encapsulated custom HTML elements. They consist of four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules. Custom Elements enable you to define new HTML tags, Shadow DOM provides encapsulation to keep styles and scripts private, HTML Templates allow you to define reusable HTML fragments, and ES Modules provide a modular approach to JavaScript. Together, these technologies enable developers to create components that can be used across different web projects, promoting code reusability and maintainability.

 

https://www.webcomponents.org/introduction  



Arun Patidar

Avatar

Community Advisor

Hi, 

I'm not sure if I understood correctly what you are asking, but there is no way to hide the HTML or the source code of the page because the HTML displayed in the "source inspector" is the page itself. Even if you use web components, as Arun explained, you can inspect those components by enabling the "shadow DOM" configuration and thus you can view the plain HTML behind those tags. If I understood correctly, what the page you are referring to is doing is simply adding a password to protect content, and that is an easy thing to do in AEM. You could use something like this: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/security/cug

 

Hope this helps.



Esteban Bustamante