2

When using display: none you can still see the contents of the element in the source code.

Is there a way to prevent this using JavaScript, PHP or some other approach?

Rob
  • 26,989
  • 16
  • 82
  • 98
Gitman
  • 41
  • 7
  • 1
    Not with Javascript, you'll have to keep the elements in question from being sent at all (server-side), else the user can easily view them with view-source or by looking at the content of the AJAX call – CertainPerformance May 29 '18 at 02:26
  • Can remove any element in dom using javascript. Difference between live document html and view source sent from server. Depends what you are really wanting. Be more specific – charlietfl May 29 '18 at 02:26
  • 1
    What is so secret that the user on your page cannot view it? Can you provide some context? – Script47 May 29 '18 at 02:27
  • you can use html dom selector to prerender it on serverside first. – Wils May 29 '18 at 02:30
  • 1
    if it's required in the browser, then it is accessible to the end user – Jaromanda X May 29 '18 at 02:32
  • The source, as in "view source", is sent by the server as a response to a browser request. Without a new request to the server there will be no change to the source. – Jon P May 29 '18 at 02:37
  • Wils: how would I do that? Can you give an example? Script47: I have a duplicate element with duplicate content because of how the layout changes on the mobile breakdown, and it is causing issues with a modal popup since the content of this duplicate element has the modal code in it. Basically, there are two divs on the page with the same content, one is hidden at high resolutions and the other is hidden at lower resolutions in order to change the layout of the page. And if I remove the duplicate content of the hidden div from the source code the issue with the modal goes away. – Gitman May 29 '18 at 02:38
  • 1
    Based on your recent comment, you are trying to solve this the wrong way. Duplicate content is not great to start with, trying to remove some based on screen res is even worse. Refactor your layout and look at CSS media queries. I also hope you are not using duplicate IDs as that will make things even worse. This is a classic example of an [XY Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Jon P May 29 '18 at 02:46
  • As @JonP said, make use of media queries, that is the proper to achieve a responsive design, which is what I'm guessing you are trying to achieve. – Script47 May 29 '18 at 02:46
  • I am using css media queries in order to hide/show the different elements at different resolutions. It's a 3 column layout. On the mobile breakdown, the middle column goes on top then the left column below that then the right column below that. Right now, I have a duplicate element at the top of the left column with a different ID but the same content as middle column. On the mobile breakdown the middle column gets hidden and that element at the top of the left column is shown and it has the contents of the middle column in it. Is there a better way to do this? – Gitman May 29 '18 at 03:15

1 Answers1

0

You havent gave much infomation about if you mean view source or inspect element, what you can do is set the insides of the element to nothing, by doing this:

<script>document.getElementById('myElement').innerHTML = "";</script>

When viewing the element from inspect element, the insides of your element will simply be gone,

The downside is its still viewable on view-source, i cant think of a fix to this

i wouldn't recommend doing it this way because if your making some kind of admin dashboard the dashboard's code is publicly visible, if you want to hide it perminantly use PHP as anything in the

<?php
//Code
?>

is only viewable to the server, not the client.

If your interested in PHP i would recommend having a look at this source: https://www.w3schools.com/php/php_intro.asp

Maragi Games
  • 1
  • 2