I've been trying to figure if there was some sort of way to count all tags on my webpage so far haven't had any luck so I came to my last resort you guys!
Basically what I want is to detect all script tags getting a total where I can than
for example
if(scriptCount != 5) {
//send warning that this user may be using an outside script
}
Just get them and use length, of course you have to actually do this after all the script tags are available in the DOM, which means in the last script tag on the page, or inside a DOM ready handler.
var scriptCount = document.getElementsByTagName('script').length
send warning that this user may be using an outside script
You shouldn't.
There are many browser addons which add script tags to a page which are visible to the page's JS code. No user will tell you that they are happy because you warned them. But you will likely lose users who think that your page behaves oddly.
If you want to prevent "cheating", then this idea won't work either.
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?
I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps
I have a Javascript greeting that greets new users with a drop down banner like SO has. It only becomes visible after 3 seconds and when the X is clicked it disappears. Since I have not put meta description tags, on every page Google shows that greeting as the meta data. I dont understand why Google is using this seeing as it is not loaded staight away, will this stop happening if i use meta description?
Should I use Meta desciption? On the upside it might help this problem, but then Google wont be able to dynamically fetch data from the site (which happens to be a forum). It so happens that it is doing this anyway and I dont know why?
Thanks!
My best guess is the text from your greeting is being added to the page (a wordpress plugin?) on the server side as visible (so it appears even if javascript is disabled), hidden by javascript on pageload, then just being shown after 3 seconds (i.e. it is really there already and as such is the first major text google finds).
Try changing your greeting plugin/code to generate the div containing the greeting message after page-load, or at least to append it to the end of the document (or apply style="display:none;" as an inline-style so Google can see it) on the server-side then tweak the js to show it. It would no longer greet visitors with js disabled, but would also allow google to reach your main content without encountering the greeting.
It does this because it's the first readable bit of text found when parsing the DOM. I'm not sure if there is a delay google uses before it saves the page state to its cache but that shouldn't matter. I actually use this 'feature' of google to allow me to manipulate what the site listing says in the search listings. If you want it not to show up just move the code for the message to the bottom of your <body>s node list (i.e. put it just before you close the </body>).
display:none won't do anything it has to be moved so that it's not in the first few readable lines of text when the DOM node tree is parsed.
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
I'm trying to manipulate a site. When the site loads it initialize a script, Codaslider http://www.ndoherty.biz/2009/10/coda-slider-2/
How can I stop it from running? Is it possible to remove it before document ready?
The function I want to remove is:
$(function () {
$("#coda-slider-1").codaSlider({slideEffect: "easeInOutExpo"
, autoSlideInterval: 5500});
});
I've tried
$('#coda-slider-1').codaslider().stop();
and
$.codaSlider().stop();
without any luck. Is the last example possible?
Is it possible to remove the codaslider script entirely? Since I'm trying to manipulate a site that already have loaded the script. How can I dynamically erase / stop the script.
You can remove the script but if that is loaded first it will still run. You are in kind of a sucky situation there... To remove the script remove it like you remove any element. But if part of script was loaded and started running there is not much you can do. You can also remove some required field for the script so it will crash and make an error handler but for this you would need access to the script witch you don't.
If you manage to find a nice and clear way to remove it please post it. I'm quite interested since all I found were workarounds.
This is not a solution, but it reset the script.
$.fn.codaSlider = function(settings) {
//empty
};