I'm attempting to inject jQuery into a site that's not mine, and is in an iOS webview. I'd like to change a few things like the background color, font, etc.
I read the answers here...
How to inject JQuery into existing page within a UIWebView?
But couldn't figure out a way to do it.
All the solutions I've read suggest using stringByEvaluatingJavaScriptFromString to inject jQuery. I believe this solution only injects JavaScript though, while I think what might work is how jQuery is normally installed with the html head tag inside a script tag like this
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
</head>
I don't know how to inject that though? Or maybe there's a different way entirely?
Related
I'm using a low-code development platform called WaveMaker right now, and it gives you the option to customize the "markup" of the page (HTML, but you can't really edit <head>; the whole thing is kind of weird), the Javascript of the page, particularly with events like onpageload, etc., the style of the page (CSS), and the page's variables (JSON). I'm trying to embed Formstack forms, but every time the Markup section encounters a <script> tag, it deletes everything after the end of the tag. This is what the markup page looks like. I contacted support and they seemed to indicate that this was on purpose. Is there any way to make HTML run script included in-line without saying <script>? PS: I would be able to embed using iFrames, but for some reason the iFrames aren't working on the iPhone test program, even though they're working on the simulator.
What you can do is put it inside an HTML event attribute.
<body onload="/*your JS here*/">
</body>
If that does not work, try attaching onload to another HTML element or try one of the other event handlers (though I believe that they should have taken this into account as well)
How about this :
<body onload="javascript:(function(){
// you can place your code here it should run
alert('ok')
})()">
</body>
In Avatao's Senior Web Security Career Path, there is a hacking task, where you need to insert malicious javascript code - but the <script> is tag filtered (other tags aren't). Aenadon's answer gived me one solution:
<body onload="your JS here"> </body>
After submitting that, I checked the official solution, and I found that:
<img src="x" onerror=alert('xss')>
My WebExtension has options, such as "hide footer". Problem is that I can't manipulate DOM on document_start, because the <footer> doesn't exist yet. Injecting the code on document_end works, but the users still see the footer for a few seconds.
I have tried injecting CSS on <head> using document_start and it worked well. Now my question is:
Since CSS won't always be the same, what would be the best way to inject CSS? Is there a JavaScript function to directly write CSS to <style>, or should that be written manually using something such as innerHTML?
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.
I'm trying to implement Google Calendar on my site into an iframe, I know Google has its own code for this, but the Calendar isn't editable then.
I have tried a few things, but I don't have the knowledge. Can anyone help me with this please?
<style>
input.createtable {
display:none;
}
</style>
<script language="JavaScript">
<!--
writeConsole = function(content) {
top.consoleRef=window.open('','myconsole2',
'width=800,height=800'
+',menubar=0'
+',toolbar=0'
+',status=0'
+',scrollbars=1'
+',resizable=1')
// top.consoleRef.document.open("text/html","replace");
top.consoleRef.document.writeln(
'<iframe <script src="http://www.gmodules.com/ig/ifr?
url=http://addthisshare.com/calendar3.xml&up_calendarSources=&
amp;up_calendarColors=&up_calWkst=2&up_calDefaultView=MONTH
&up_calHeight=375&up_calShowPrint=0&up_calShowCals=1
&up_calShowTabs=1& amp;up_calShowDate=1&up_calShowNav=1
&up_calNoActive=&up_calTimeZone=Europe%2FAmsterdam
&synd=open&w=805&h=390&title=Google+Calendar
&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F
&output=js"></script>"></iframe>'
)
top.consoleRef.document.close()
}
//-->
An iframe has a src-attribute that is the url to page you want to display inside of the iframe.
Code that you put between the <iframe>and </iframe> will not be seen, unless the browser does not support iframes.
So, you cannot expect both the above techniques to work at the same time. Either your src-url will be used or your code between the iframe-tags will be used; never both. This means that there is no way to "embed a javascript into an iframe". The only way to get your script in there would be to add it to the source page that you're loading into the iframe.
On a final note, I don't think you really know what you are asking for here. The title of your question is probably not what you want to do, but we'll need a little more information to solve your actual problem.
EDIT
I think I have a better grasp of what you're asking now. What you should do is to forget the iframe for a moment and just focus on getting the events to work. When you have that working, put it into a file of its own and reference that file via the src-attribute of the iframe. Nothing should be "put inside the iframe" by adding code in the iframe-tag itself.
The Same Origin Policy prevents third parties from writing scripts that can insert data into arbitrary websites.
If Google do not provide an API for this, then it cannot be done.
I'm working on a small GreaseMonkey script where I would like to embed a jQuery plugin (Markitup) so that the script is fully self contained (images + js) except for jQuery which is served from google.
I found the site http://www.greywyvern.com/code/php/binary2base64 which says that you can embed javascript with the href if you base64 encode the script, much like serving images as basse64 from CSS.
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
So i tried that but couldn't get it to work at all, using Firefox 3.0.5 on OS X.
I put together a small test page to isolate the problem but couldn't get it to work at that page either.
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>
<script href="data:text/javascript;base64,YWxlcnQoJ2FzYWRhc2QnKTsK"></script>
<script>alert('a');</script>
</body>
</html>
The base64 string (YWxlcnQoJ2FzYWRhc2QnKTsK) says alert('asadasd'); so I'm supposed to get two alerts but the only one I see is the second one where the alert is located as text inside the script tag.
Am I doing something wrong or why isn't this working, any ideas?
maybe just a thought but maybe the "href" should be "src" instead.
If you'd check script tag syntax you'd get
<script src="..."
^^^
src NOT href
Using data URIs here doesn't work in IE 6 btw.
That's funny, I am working on precisely the same problem: making a Greasemonkey script to add markItUp to all textareas of a page.
Now, I don't have an issue with the library script itself. I don't see why you want to insert it as Base64, anyway. As pointed out, it will be larger.
You can put it directly in the GM script if you want (some people do that with jQuery), or add dynamically a <script src="someURL"></script> to the document and wait for loading (there are numerous examples of that on the Net)(inconvenience: creates a traffic on the sites holding the files), or, like I am currently trying, using the latest (0.8) feature of GM:
// #require jquery.js
// #require markitup.js
// #resource miuStyle style.css
The required JS files are automatically loaded into the GM script from a local copy, which is fast and always available. Don't use the packed versions, they don't work here. I also had issues with set.js so I just put in directly in the script.
It works well, but I don't have style nor icons yet.
I must put the miuStyle text in the Web page, I think, and change it so all background images refer to the same image hosted on Photobucket or similar, with offset. I haven't found a way to use local images (in CSS), alas, even with #resource.
My response doesn't address your problem, alas (but John's remark seems valid), but it might put you to another, simpler solution.
Base-64 makes the file larger, but it makes it more machine readable so it actually increases pagespeed. I can definitely see why you'd want this, unless you want to look at 50 lines of gibberish in your file. FYI, I just read a study that base 64 actually loads slower on mobile so if your app is heavy mobile I'd stay away