Styjun

I'm in the process of (slowly) learning how to make my websites more secure. I was checking out D&D Beyond, and noticed a few things I've never seen before, and I would like to learn more about.

1. Portions of the source code don't show up when you View the Source.

It's hard to explain. I tried to explain it in a different post, and I got a ton of snarky remarks. I'm telling you, I know what I saw. I would like to know how this is possible and how I can replicate it.

I typically write in PHP/JQuery, so I'd primarily like to learn more using those languages.

Example:
You can create a Character using their Character Builder, then view your Character Sheet. The main portion of your character's stats are enclosed in a very large parent div: ".character_sheet"

If you MANUALLY save your Character Sheet to your Desktop, you can see the HTML for this section. If you inspect this section in Firefox, you can also see the data. However, if you try to CTRL+U while in the browser, the HTML in this section does not appear. It also will not appear if you try to curl/fopen/file_get_contents

Additionally, images are not visible by normal means.
For Example: I am aware of how to disable right-clicking on a website, but if someone wanted to take my images, all they'd have to do is open my source code and look at the image url and save it from there.

On the D&D Beyond site, I can bring up Firefox's web inspector where an Image SHOULD be, take a look at the CSS, and... nothing. No link to an image, where one should be. I don't know how they're getting images to appear without css/html. I'd be very interested to know how this is done.

If anyone has any insight/guesses/etc and can point me in the right direction to learn some more, I'd really appreciate it!

Server-side code such as PHP is always hidden to visitors (unless you have a security vulnerability of some sort).

Client-side code such as HTML, JavaScript and CSS is always visible to the visitor. Even if you can't see it immediately in the DOM, it will be hiding there somewhere.

The most likely scenario is that it is hidden within an embedded .js or .css file, which would look similar to the following:

<script src="scripts.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">

HTML can be outputted to the page through JavaScript, which will not show in the DOM (though it would show up with a PHP echo). HTML can also be 'hidden' through use of <iframe> tags and HTML imports.

JavaScript has a wide array of ways in which it can be obscured / malformed, so it can be hard to track down. You may some some strange, 'unreadable' code in the DOM / .js files, which in turn could be outputting the HTML itself.

Please consider the below points,

1. All client side resources are viewable although you can make it easyless readable by javascript and it's better to do most of your codes by server side.




2. You need to know about what search engines love if your app is a public web site & will be indexed by those search engines, as some search engines don't scrap to the web pages which have only JavaScript code.




3. You can create images without <img> tags using CSS background-image Property.




4. there are some useful lib's to make your code more hard readable like Closure Compiler Service & JSFuck & JS Packers although it's better to make it by yourself and just add like those techniques to your knowledge, noting that this will make your code size larger.




5. and at all there are no white page source, it should contains at least <script> and if you saw a real white page it may be disabled from sever side to be viewable at top of window and it may be works if embedded in iframe or by sending specific headers to it or whatever else.




6. You can make your server & client sides cooperate :) to get great result and more secured.