I wrote a chrome extension for a specific website. If the extension is installed and I navigate to that site "example.com", my extension calls the following method:
var search="john";
$.get("https://www.example.com/complete/search?q="+search, function (data) {
console.log(data);
});
That works just fine.
Now I have to call the same method from within the options-page of that extension. When I do that, I receive the following error:
XMLHttpRequest cannot load
https://www.example.com/complete/search?q=John. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost' is therefore not allowed access.
I understand why this happens but have to find a way to get around this. My idea is to trigger the Extension-Script to call the method and then return the results to the options page. I expect, chrome.runtime.sendMessage() isn't help here.
Needless to say: That domain is not hosted by me, so I can't just change the header.
The error indicates it's not an actual options page: you're opening it (possibly accidentally) through a local webserver (origin: http://localhost/) instead of opening a page packaged with the extension.
You need to add your page (say, options.html) to your extension's folder
You need to add it to the manifest like "options_page": "options.html" or better yet with options_ui
You need to reload the extension to apply the manifest change
You need to open it through the extension, e.g. through chrome://extensions or the context menu of your extension's button (if any)
Related
I am using asp.net MVC 5 application. In that, I am using the jquery to load the div with the external url.
Html
<div id="DivOne" class="oddNum">Div One</div>
<button id="btnOne">Load Content</button>
Jquery
$('#btnOne').click(function() {
// Action goes here
$('#DivOne').load('http://www.artisteer.com');
});
I am getting the following error message (in browser console) when in button click event.
Failed to load http://www.artisteer.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Here is the JsFiddle Url:
http://jsfiddle.net/Q8KVC/7533/
Note: I dont want to use iframe
PS: Okay, I think I am left with only option is to use iframes. Do we get the same issue with the iframes as well?
Use an https endpoint for your external URL, otherwise, you will end up with a mixed content error on console
you can see visit link for more understanding
mixed-content-the-page-was-loaded-over-https-but-requested-an-insecure-xmlhttprequest-endpoint
HTTPS is important to protect both your site and your users from
attack.
Mixed content degrades the security and user experience of your HTTPS
site.
For chrome if add Access-Control-Allow-Origin plugin it will solve the issue. It will work for chrome browser only
I have latest version of ckeditor. I did file upload to my remote service. that service after uploading, returns uploaded file link. that is included as iframe 'upload' tab.
So that is all ok. But when I try to switch tab or close image uploader popup window 'ckeditor' throws error:
"Blocked a frame with origin "http://localhost:3101" from accessing a frame with origin "http://localhost:61666". Protocols, domains, and ports must match."
Is where any way to fix this problem?
That is a security standard. Browser auto check and prevent it like default way. Have no method to pass it.
But in your case I have a trick to resolve this problem, you can try this:
After click "send it to server" and receive a response.
Detect your iframe source by id in DOM
Change the iframe's source domain to current domain. (important thing of this trick to pass error "Blocked a frame with origin..." )
And do continue like as you did.
I have a upload script in another host and after remote file upload with Ajax I call a function like this :
echo '<script language="javascript" type="text/javascript">window.top.window.stopUpload('.$result.' , \'res2\' , uploaded , dkey);</script>';
the stopUpload function in the main page should run and do some thing (show pictures and ...)
but I get Permission denied error
Error: Permission denied to access property "stopUpload"
tip : Imagine I have stopUpload function in pageA and I call send file with ajax to upload in my another Host page called pageB I have a stopUpload function in pageB which should run on pageA after upload complete but face to above error ...
Can I call javascript function in another page remotely?
Thanks.
You are probably violating Same Origin Policy.
An Iframe can access parent window content only if they both belong to same origin.
An origin consists of Protocol (http/https), domain name(example.com and port(default 80). If any of these are different then sites are considered from different origins. If you are able to modify content of both the sites then you can manually set the document.domain=domain.com. After that you won't get the error.
#Edit
Both the sites should at least have super domain in common for manual domain setting to work.
For example, facebook.com and google.com can never be compatible since their super domains are different.
However docs.google.com and developer.google.com can be compatible as they have super domain google.com in common.
They both would have to declare document.domain=google.com in a script tag.
I have a need for a solution to a repetitive task I do in Google Chrome.
I come across IP addresses once in a while, and I need to geo locate them.
On my system I already have a REST service that If I called a certain url:
http://localhost:8080/json/8.8.8.8
I get a JSON response with GEO data.
I want to create a chrome extension that would trigger a geo rest call on selection or even hovering over a IPv4 string.
Is such an extension possible? Would it be blocked by cross domain request protection?
You can do is as an extension to chrome, content scripts, message passing and setting up proper permissions.
Content scripts will run on selected (or all) pages and can do whatever you want with the page. They just sandboxed from page's JavaScript environment. You can develop a hover action which recognize IP address and send the information to the background page where it can be processed (in environment and especially permissions of the extensions which are not available in context of content scripts).
In the background page you can make a request using either XMLHttpRequest or Fetch function. After you process the data you can return the result to the page via message passing or do whatever you want with it.
In the manifest file you can set up specific URL you want to send information to or <all_urls> to have permission to send request everywhere.
...
"permissions": [
"http://*.google.com/"
],
...
Then your request won't be subject of CORS and same domain policy.
You can run the following scriptlet directly from Chrome's address bar:
javascript:var xhr = new XMLHttpRequest;xhr.open('GET', 'http://localhost:8080/json/'+window.getSelection().toString(), true);xhr.onload = function (e) {alert(xhr.responseText)};xhr.send();
(note that you'll need to prepend the "javascript:" to the text on the address bar when copying from here because Chrome trims it when pasting).
Add this as a new page bookmark (name it something like "IP Geo Data") and put it on the bookmarks bar. Alternatively just type its name and choose it on from the ombibox autocomplete. You'll need to have the IP you want data about selected.
You're right about the cross domain protection, but since you control the service on your localhost:8080/json, just have it add the following headers on requests made to that path:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since
Final product: take a file called theFile.txt which is saved with the js and HTML file and have it broken up by line into an array.
Problem: Works fine in Firefox but revives the following error in Google Chrome:
XMLHttpRequest cannot load file:///C:/Users/(my name)/Documents/testFile/theFile.txt. Received an invalid response. Origin 'null' is therefore not allowed access.
Javascript code:
$('#infoStore').load('theFile.txt', function(result) {
text = result;
console.log('here: '+text);});
HTML code for infoStore:
<div id="infoStore" hidden="true"></div>
Thank you in advance for your assistance. I will be online to answer questions often.
That's because Chrome treats all origins using the file: protocol as being different from each other, and so the Same Origin Policy comes into play. It's just a security choice distinction between Chrome and some other browsers.
You basically can't use ajax with local files served via the file: protocol. (In Chrome.)
You could read the file using the File API (this answer shows how), but of course that has limitations (not least that the user has to give you the file to read, either via <input type="file"> or drag and drop).
This happens because of Same-Origin-Policy. You should load that file from webserver, not from local directory.
If you want to access local file in chrome ??
Sometimes it’s cool to debug and test javascript applications in Chrome but you want to read / write to local files. Example: you’re looking to use ajax and do a $.getJSON(‘json/somefile.json’). Chrome by default won’t allow this and will throw an error similar to
Failed to load resource: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
Origin 'null' is therefore not allowed access.
Or
XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
header is present on the requested resource.
Origin 'null' is therefore not allowed access.
Chrome does have a switch to enable this, it’s quite easy to turn on. You’ll need to make sure Chrome is closed completely, and run chrome with the ‘–allow-file-access-from-files’ flag. Ie:
C:\Users\<user>\AppData\Local\Google\Chrome\Application>
chrome --allow-file-access-from-files
Or you should be able to run:
%localappdata%\google\chrome\application\chrome --allow-file-access-from-files
I’ve made the below into a .bat file I use, if you find it helps.
start "chrome" %localappdata%\google\chrome\application\chrome --allow-file-access-from-files
exit
To see if the flag is set, you can visit: chrome://version/ and look at the Command Line section and you should see –allow-file-access-from-files
You’ll most likely need to run this with at least admin access, and I would caution visiting unknown sites with this setting on, as they could capitalize on your setting and potentially read local files.
REF: Reference Link -Allow Local File Access in Chrome (Windows)