I am working on an app using Django 2.1.5 with DRF 3.9.1 and on firefox browser console, I am getting this error:
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:2): bad URI or cross-site access not allowed source: http://softpro-admin-templates.websitedesignmarketingagency.com/assets/vendor_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
After some googling, I came across this link https://github.com/ottoyiu/django-cors-headers/
As mentioned in the document I have installed the package and made the following modifications in the settings file:
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #added at the top
-----
]
INSTALLED_APPS = [
'corsheaders',
]
But still, I am getting the same error. Can someone help me with this issue?
I'm assuming you're not the owner of softpro-admin-templates.websitedesignmarketingagency.com
Somewhere on your site, you're using fontawesome version 4.7.0 (A common icon font) but providing the above host as the source for this font. Due to CORS policies in most browsers, the host has to specifically allow this if the site the request originates from (yours) was fetched from a different domain (origin).
As the maintainer(s) of softpro-admin-templates.websitedesignmarketingagency.com likely don't know anything about your site, this hasn't been done. Change the src of fontawesome to your own server or the CDN suggested by fontawesome to solve this.
Related
I am trying to implement the IIIF standard in order to show some papyri. I have configured Loris as an image server (here there is an info.json example: https://philhist-papyri-01.philhist.unibas.ch/loris/1/images/1.RectoIliad19th(T)book-IR-enh.jpg/info.json) and also I have configured Mirador. I am also serving manifests via an API (example: https://philhist-papyri-01.philhist.unibas.ch/api/iiif/11b4ca60-6bac-11eb-a1e6-005056b34690/manifest).
When I try to load the images in Mirador, I am getting an error:
Tile push../node_modules/openseadragon/build/openseadragon/openseadragon.js.$.Tile failed to load: https, https://philhist-papyri-01.philhist.unibas.ch, philhist-papyri-01.philhist.unibas.ch/6%2Fimages%2F6.VersoUnidentifiedLiteraryText-IR.jpg/full/4,/0/default.jpg - error: Image load aborted
Does anybody have any idea why this is coming from? The image actually can be retrieved from the URI in the manifest (https://philhist-papyri-01.philhist.unibas.ch/loris/1/images/1.RectoIliad19th(T)book-IR-enh.jpg/full/full/0/default.jpg), but it is not being shown in the mirador window.
There might be an issue with the resolver of Loris which is causing the #id of the image not to be canonical, but I am not quite sure.
I'm seeing an issue that perhaps CORS is not enabled for your info.json responses.
See: https://projectmirador.org/embed/?iiif-content=https://philhist-papyri-01.philhist.unibas.ch/api/iiif/11b4ca60-6bac-11eb-a1e6-005056b34690/manifest
Depending on how you use Loris to serve content, you will need to enable CORS for the IIIF requests.
Context
I am currently working on a browser extension which is working as expected with Chrome and Opera but I am facing issues with Firefox. Here is a minimal version of manifest.json needed to reproduce the problem:
{
"name": "Example",
"version": "0.0.1",
"author": "Pyves",
"content_scripts": [
{
"all_frames": true,
"matches": [
"<all_urls>"
],
"js": [
"content.js"
]
}
],
"manifest_version": 2
}
And here is the related content.js:
console.log("Content script loaded");
Issue
Content script loaded is systematically logged regardless of the visited page when using Chrome and Opera. Nevertheless, the content script doesn't seem to load in some pages when using Firefox, for instance raw GitHub pages such as the following:
https://raw.githubusercontent.com/badges/shields/master/README.md
There are no error messages in the Firefox console stating why the content script was not executed on that particular page.
Questions
Why is the Firefox extension unable to load the content script into some pages?
What changes need to be made so that the extension works consistently on all browsers?
I finally figured out why the extension's content script is not loading in some pages when using Firefox.
After analysing the requests with the Network developer tools, it turns out that the following headers are returned when getting GitHub raw pages:
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox
According to the MDN Web Docs, the sandbox CSP directive has the following effect:
enables a sandbox for the requested resource [...]. It applies
restrictions to a page's actions including preventing popups,
preventing the execution of plugins and scripts, and enforcing a
same-origin policy.
Therefore Firefox is preventing extensions from executing content scripts in pages with the sandbox CSP, whereas other browsers such as Chrome and Opera do allow this behaviour. Related bug reports in Mozilla's Bugzilla (1267027 and 1411641) highlight that:
CSP 'sandbox' directive prevents content scripts from matching, due to unique origin
This issue has been acknowledged and will hopefully be fixed in future releases of Firefox.
I am almost done with upgrading my Rails3 app to Rails5; But I am facing a problem with assets pipelining and precompiling. We're using cdn as asset host.Now, What happens is that when I set config.assets.precompile to false in staging environment, the app doesn't load images from js.jsx files. At other places, the app is fetching the static assets (js,css,images) from the asset_host link that I've provided. But in some specific javascript files, The images is being pointed out to my app's domain like app.my_domain.com/assets/my_image.png,And it is giving 404 not found error.
In javascript, the code is something like
return (
<img src="/assets/my_image.png"></img>
)
Since this is a js file, I cannot use asset_path helper method here.
How to resolve this issue ?
PS: setting config.assets.precompile to true loads the image from app.my_domain.com/assets/my_image.png, but that's not what I want because of this. config.assets.compile=true in Rails production, why not?
Any help with this is highly appreciated. Thanks in advance.
I found an answer after some research. I changed the name of the file to js.jsx.erb and accordingly used asset_path helper method which rails provide.
return (
<img src = "asset_path 'my_image.png'"/>
)
It works.
Two years I used the Reddit API to pull stories into a Rails app I built. I wanted to come back to it to refresh myself on RoR. It seems like I got all of the updates working and can sometimes run it, but here are my issues:
1) Reddit now requires Oauth2 for API requests. I'm using the Redd gem and am able to get authenticated, but I get the 429 error (too many requests) error.
I copied from the Redd instructions the following into my model (substituting my info from my registered Reddit app page):
# Authorization (Web)
w = Redd.it(:web, "_myClientId_", "_My_Secret", "_myRedirectURI", user_agent: 'ruby:edswartz.com.myredditapp:v1.0 (by /u/edswartz')
url = w.auth_url("random_state", ["identity", "read"], :permanent)
puts "Please go to #{url} and enter the code below:"
code = gets.chomp
w.authorize!(code)
# Authorization
re = Redd.it(:script, "_my_Client_ID_", "_my_secret_", "_my_user_name_", "_my_password_", user_agent: 'ruby:edswartz.com.myredditapp:v1.0 (by /u/edswartz')
re.authorize!
edAgent = 'User-Agent: ruby:com.edswartz.trueQuotes:v1.0 (by /u/edswartz)'
response = JSON.load(RestClient.get('http://reddit.com/.json'),{'User-Agent'=> edAgent})
After successfully authenticating (copying and pasting the code into the console) I usually get a 429 error. What am I doing wrong? I'm not trying to spoof the user agent, but have put it in manually. I just don't know how else to do it.
The times that I do get in and see the site appear it is obvious that Bootstrap has not loaded. In looking at the Rails-Bootstrap documentation I see where the Gem name has changed and the application css. My /app/assets/stylesheets/application css looks like this:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
#import "bootstrap";
*/
Again, not sure this is right either but have tried to comply with the read me from https://github.com/twbs/bootstrap-rubygem
Any help anyone can provide on either of these issues would be much appreciated.
I resolved the Bootstrap question. I was using Bootstrap 4. When I went back to Bootstrap 3, and moved the #import directives in the SASS file out of the comments section AND changed the "span4" class to "col-md-4" everything worked.
The user agent seems to be working more often so it might have been a caching issue?
In any event, onward.
I am trying to port a chrome extension to firefox using the relatively new WebExtensions from Firefox.
I always getting the following error
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at .... (Reason: CORS header 'Access-Control-Allow-Origin' missing)
I added the website i would like to access to the permissions section inside the manifest.json like explained on the website, and also on Google Chrome its working.
Normally it should work that way, at least its explained that way on https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Cross-domain_privileges
I would be very thankful for any help since I am out of ideas.
manifest.json
{
...
"permissions": [
"<all_urls>"
]
}
I think you need to add a CSP header to your HTML page. http://content-security-policy.com/ I had to add one to get mine to work with a similar warning.