When you navigate to: blockchain.info
You will notice that if you click view-source on the page, it will show HTML context different than that when you inspect-element. My question is, how are they doing this?
I understand they are using .pug templates from AngularJS framework. But how does my browser know where to read them from if they are not loaded from the client-(browser)-side?
Also, if I was to insert jQuery onto the page, would the jQuery know when the events are triggered on('click', 'submit', 'whatever') etc ...?
When you click View Source, you see what the server sends back. Many pages do not send back a full HTML page, instead some skeleton HTML and add the rest of the functionality via JavaScript
When you Inspect Element, you're viewing the browser's representation of the DOM, which includes any manipulations done via JavaScript. For a visual explanation, see this article on css-tricks: https://css-tricks.com/dom/
Any framework that is rendering HTML client-side (React, Angular, Vue) will do that. The actual source code could literally just be some basic html boilerplate and a div that then gets loaded with an application through something like Javascript. Thus, when you view the source of the page, you're seeing this basic templating. But when inspecting an element, Chrome Dev tools (and others) are inspecting the element that is being rendered client side. Your browser has placed those elements on the DOM, they didn't exist in the source code till the code executed. Hope that helps clear things up.
Related
I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.
What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.
You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?
Is there any way if i can load javascript and css files in spring mvc, such that it is not readable whenever someone view source of the web page ?
I want to do this without doing minification.
I also looked for other options like & dont know which one to user.
NO. Well, not really.
You can't add js and css to the DOM and have it work without being in the DOM. You could dynamically load them, but they will still be visible in the DOM inspector in any browser, but will not be visible to your run of the mill user right clicking and doing view source.
I have jQuery based template from themeforest and
i building on this ASP.NET Web Application.
But i have a problem, when my javascripts files
from template are included, my asp.net things
don't work how should, eg. dropdownlist events
not rising... When i comment javascript templates
file then everything works fine.
Someone can help me solve this?
Thanks,
Many jQuery UI elements (dialog, for example) are rendered at the end of the BODY tag. This means their contents are moved outside the FORM tag, and are thus ignored by ViewState. This will prevent their associated events from being triggered (and will prevent their updated data from making it back to the code-behind at all).
If you use firebug to examine the rendered HTML, you should be able to confirm whether this is the root cause of your problem.
If so, see this SO discussion for a resolution / workaround. HTH
I am inspecting a website, which has tons of JS files loaded from several servers along with jQuery. Number of js files is really big. Some are within the regular scripts tags. Others are loaded dynamically via ajax.
I am interested in certain elements of the DOM which are manipulated because of some js file. I see the dynamic loaded elements in firebug. I needed to know exactly which JS script creates/updates them.
I searched the js files for the classes and the IDs of the elements,so I can have some clue about which js file affects them, but I found nothing.
Is there any direct way using Firebug to know exactly which JS file manipulates certain DOM elements?
Thanks in advance.
Not in a direct way.
Use EventBug addon
Then search by the function signature in your script panel to drill down to the js file
Hope this helps!
You should be able to go to Script tab in firebug, then look at the toolbar right below the script tab you can select all the javascript files included on the page.
If you have an idea which file it is coming from then select that file and then look through the code and set break points on functions you think the event is coming from by clicking on the respective line number, then refresh the page and perform the event that calls the javascript.
You might have to put in a few before you narrow it down, but the break points will make it alot easier to tell which functions are being called for which events.
I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.