This question already has an answer here:
Console shows error about Content Security policy and lots of failed GET requests
(1 answer)
Closed 8 years ago.
I use $.get function to get some html from exetrnal website in my chrome extension:
$.get(url, function(data) {
var someImgs= $(data).find('img[width="90"]').parent();
});
But I see such errors in my console:
chrome-extension://nqzxdldmasxchnkgibeedilpknlbndiho/files/image.png
I don't use any images in my extension, and I know this is link to image on exetrnal website.
What I tried:
wrap $.get() function into try-catch
handle error using $.ajaxError()
replace relevant links /files/image.png to full path: http://website/files/image.png using data.replace()
run example code in jsFiddle: errors are the same but despite of that code continiues running.
No ideas now. What I do wrong?
UPD: Error doesn't occur when I don't touch to data. When inside $.get I simple type console.log(data) there are no errors
UPD2: I also tried to download all the images whcih are mentioned in error messages and put them in the same path in my extension as on external website
UPD3: As it was mentioned in comments, images from remote website are reffering to relative paths. So I tried to replace relative paths in 'src' attribute to full, using this code:
var data = data.replace('/sites/default/', 'http://website/sites/default/');
As you guess - result is the same, same errors.
UPD4: Seems like replacement wasn't successful. I checked the above replacement and it says nothing changed:
console.log(data.indexOf('src="/sites/default/')); //returns integer
So, actually it was solved by downloading remote images to my extension foled. Little 'nasty' way but the only workable. Thanks to all the commentators that helped me to find out the source of problem.
Edit: On second look it appears that the html of the page at url contains images with relative file paths (like /files/menu_banners/ktc_apple.png), but when you interpret it and treat it with jQuery as a DOM object, it fails to load them because their urls are now interpreted as relative to the extension (cross-origin restrictions still apply, but that's not the issue since you've edited the manifest)
--
You are trying to make a cross-origin request, but jQuery isn't aware of a correct API to use when included in an extension and that is why it's failing. You can read more about XHR in Google Chrome extensions; you basically need to allow cross-domain access to your website URL:
By adding hosts or host match patterns (or both) to the permissions
section of the manifest file, the extension can request access to
remote servers outside of its origin:
//manifest.json
{
"name": "My extension",
...
"permissions": [
"http://www.google.com/"
],
...
}
So in your manifest you should include your http://website url, or use a wildcard http://*/ and allow access to any domain (handy in dev, terrible idea security-wise in production)
Related
I've encountered a paywall and I'm trying to bypass it using javascript in the console. I did some research and found a few different approaches, one of which is changing the requestheader in order to make a given website believe that you got there through a twitter link (thus allowing you to view the content for free). The function I use aims to change the referer by listening to the onBeforeSendHeaders event as specified on https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeSendHeaders. It looks like the following (NOTE: This function is typed and executed directly inside of the devtools console):
function setReferer(x){
x.requestHeaders = x.requestHeaders.filter(function(header){
if(header.name === 'Referer'){
return false
return true
)}
x.requestheaders.push(
{
"name: "Referer",
"value": "https://t.co/" //Twitter website
}
return {requestHeaders: x.requestHeaders};
}
//this example uses chrome browser
chrome.webRequest.onBeforeSendHeaders.addListener(setReferer,
{
urls: ["<all_urls>"],
types: ["main_frame"], },
["requestHeaders", "blocking", "extraHeaders"] //extraHeaders meant to bypass CORS protocol
);
Unfortunately upon refreshing the window, this approach gives me folllowing error:
GET <some_url> net:ERR_BLOCKED_BY_CLIENT
Behind this error is the URL to the source code of the article, which I was able to load and copy into word, so I got the article I was looking for anyway. However I wasn't able to view it inside of the browsers main frame. Note that I am doing this only for the purpose of polishing my coding skills. I am trying to get a better understanding of the more complicated facets of the HTTP protocol, especially the way headers get sent clientside and interpreted serverside. If anyone knows more about the subject or knows / has a resource that he or she wants to share, this would me greatly appreciated!
I am trying to import a json file from a website using p5.js, and i thought it would be quite easy, however when i tried it i realized the json was actually just in plain text on the page (It is the only thing on the page). I checked chrome web tools to look at index.html, but i was greeted by "(index)", is it a problem with google or am i just going to have to use something else than this?
function preload() {
httpGet('leaderboard.popcat.click', 'json', function(response) {
});
}
//there are the setup and draw functions aswell
I got an error when i ran the code aswell, it was
Error: JSONP request to url failed
here is a picture of the page btw, (the url is leaderboard.popcat.click)
EDIT: The main problem i am having is that there is no file in https://leaderboard.popcat.click/, not the getting of json.
The network tab says no such url exists, and i believe that is because of the fact that i didn't specify a file.
Here is the console output aswell
I solved my issue by starting chrome in no-cors mode or whatever it's called AND using the full path of the website. I got it into no-cors mode by making a shortcut with this link
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=~/chromeTemp"
and running it as an administrator
This is my first project using javascript (basically forked code from here: https://www.kkhaydarov.com/audio-visualizer/)
I'm trying to build a visualizer that responds to the audio I am hosting.
Problems:
- Getting thrown a CORS 400 error (i'm using https://cors-anywhere.herokuapp.com/http:// in my source url)
- Audio is not getting recognized
Here is a link to my project on codepen: https://codepen.io/beewash92/project/editor/ZGWOQr
Code is also stored on my github: https://github.com/beewash/js-audio-visualizer
enter code here
I've scoured other posts on stackoverflow and across the web, but still running into issues. You're help is appreciated !
If you try to browse the link in chrome you will get the message as below
Missing required request header. Must specify one of: origin,x-requested-with
You will need to define the custom request header as stated above in order for it to work. Refer the api here as it clearly stated what you should do beforehand.
You should create a request with the header as follows
fetch('https://cors-anywhere.herokuapp.com/http://soundcloud.com/gentttry/10999-1', {
'headers': {
'Origin': 'soundcloud.com'
}
})
.then(res=>res.blob())
.then(blob=>URL.createObjectURL(blob))
.then(audio_src=>{
// Then init your audio here and assign the url
})
I want to create a custom profiler for Javascript as a Chrome DevTools Extension. To do so, I'd have to instrument all Javascript code of a website (parse to AST, inject hooks, generate new source). This should've been easily possible using chrome.devtools.inspectedWindow.reload() and its parameter preprocessorScript described here: https://developer.chrome.com/extensions/devtools_inspectedWindow.
Unfortunately, this feature has been removed (https://bugs.chromium.org/p/chromium/issues/detail?id=438626) because nobody was using it.
Do you know of any other way I could achieve the same thing with a Chrome Extension? Is there any other way I can replace an incoming Javascript source with a changed version? This question is very specific to Chrome Extensions (and maybe extensions to other browsers), I'm asking this as a last resort before going a different route (e.g. dedicated app).
Use the Chrome Debugging Protocol.
First, use DOMDebugger.setInstrumentationBreakpoint with eventName: "scriptFirstStatement" as a parameter to add a break-point to the first statement of each script.
Second, in the Debugger Domain, there is an event called scriptParsed. Listen to it and if called, use Debugger.setScriptSource to change the source.
Finally, call Debugger.resume each time after you edited a source file with setScriptSource.
Example in semi-pseudo-code:
// Prevent code being executed
cdp.sendCommand("DOMDebugger.setInstrumentationBreakpoint", {
eventName: "scriptFirstStatement"
});
// Enable Debugger domain to receive its events
cdp.sendCommand("Debugger.enable");
cdp.addListener("message", (event, method, params) => {
// Script is ready to be edited
if (method === "Debugger.scriptParsed") {
cdp.sendCommand("Debugger.setScriptSource", {
scriptId: params.scriptId,
scriptSource: `console.log("edited script ${params.url}");`
}, (err, msg) => {
// After editing, resume code execution.
cdg.sendCommand("Debugger.resume");
});
}
});
The implementation above is not ideal. It should probably listen to the breakpoint event, get to the script using the associated event data, edit the script and then resume. Listening to scriptParsed and then resuming the debugger are two things that shouldn't be together, it could create problems. It makes for a simpler example, though.
On HTTP you can use the chrome.webRequest API to redirect requests for JS code to data URLs containing the processed JavaScript code.
However, this won't work for inline script tags. It also won't work on HTTPS, since the data URLs are considered unsafe. And data URLs are can't be longer than 2MB in Chrome, so you won't be able to redirect to large JS files.
If the exact order of execution of each script isn't important you could cancel the script requests and then later send a message with the script content to the page. This would make it work on HTTPS.
To address both issues you could redirect the HTML page itself to a data URL, in order to gain more control. That has a few negative consequences though:
Can't reload page because URL is fixed to data URL
Need to add or update <base> tag to make sure stylesheet/image URLs go to the correct URL
Breaks ajax requests that require cookies/authentication (not sure if this can be fixed)
No support for localStorage on data URLs
Not sure if this works: in order to fix #1 and #4 you could consider setting up an HTML page within your Chrome extension and then using that as the base page instead of a data URL.
Another idea that may or may not work: Use chrome.debugger to modify the source code.
The javascript inside my page needs to download the small text file (just a small JSON Array) that resides in the following location:
http://dadosabertos.rio.rj.gov.br/apiTransporte/apresentacao/rest/index.cfm/obterPosicoesDaLinha/410
The MIME type of the document is application/json.
I tried with a XMLHttpRequest but I got an error:
XMLHttpRequest cannot load http://dados[...]/410. No 'Access-Control-Allow-Origin' header
is present on the requested resource. Origin 'null' is therefore not allowed access.
I googled this, and the solutions pointed to CORS and to change things on the server side, something I cannot do.
Is there any way to retrieve this content with javascript (and only javascript)?
Thanks!
L.
EDIT
Following #naresh advice, I am trying with JSONP. I added these lines to my page, but nothing happens (not even a console error):
var source = "http://dados[...]/409";
script = document.createElement('script');
script.type = 'text/javascript';
script.src = source + '?callback=downloadLinha';
document.body.appendChild(script);
My function downloadLinha(data) is just alert(data).
EDIT 2
I contacted the server administrator, and, to my surprise, they fixed the problem in a couple of hours! I didn't expect they would even answer. So my actual problem is solved, but I could not find an answer without the administrator intervention.
Anyway, thanks A LOT to all that tried to help!
Similar to what #RobertHarvey said, the lack of a header doesn't let you access it... Via Chrome, that is. You might still be able to access it using this handy tool called anyorigin.
Check it out: http://anyorigin.com/
Nope, no can do! If I could, I would hava javascript silently load the contents of www.yourbank.com via AJAX and read whatever it can. Don't you think this is a dangerous feature with the prevalence of auto-login on the web?
You can use a proxy server, which will work as long as the target file does not depend on user-specific cookies, headers, etc.