Modern internet browsers take security seriously! After many attacks and malpractice on the internet, many new security rules have been introduced. Among such rules is CORS (Cross-origin resource sharing), which applies for cross-domain resource access; mainly using AJAX requests.
Why CORS occurs?
DearFlip uses PDF.js that relies on Ajax requests to fetch PDF files and then render them using HTML5. This is where CORS applies in DearFlip if the files are not in the same domain/protocol. You can check if the following conditions are met to see if you have such a situation:
CASE 1: Page is in HTTP while the PDF file is in HTTPS or vice versa.
This is a common scenario when there is improper SSL setup and the HTTP request and HTTPS request co-exist(something that should not exist). Users are advised to redirect every HTTP request to HTTPS, so that the page and requested resource same HTTPS protocol.
CASE 2: Page is in www while the PDF file is in non-www or vice versa.
This is a common scenario when there is improper redirect/hosting setup and the www and non-www site co-exist(something that should not exist). Users are advised to use only pattern.
CASE 3: page is in xyz.com domain and the PDF file is in abcd.com domain.
This happens when users want to use PDF files from another domain. While this is possible, xyz.com domain requires proper access from abcd.com domain to access PDF files on abcd.com domain. To do so users can add proper CORS settings to the .htaccess file.
How to Fix?
Apache Server
For Apache Server, add following lines in .htaccess file
Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "Range" Header set Access-Control-Expose-Headers: "Accept-Ranges, Content-Encoding, Content-Length, Content-Range"
More Info: https://enable-cors.org/server.html
Amazon Web Servers (AWS)
Use the following settings in CORS configuration in your AWS bucket. Newer instances use JSON settings. Update this under S3 ->Buckets -> Permissions -> CORS
[
{
"AllowedHeaders": [
"Authorization",
"Range"
],
"AllowedMethods": [
"HEAD",
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Accept-Ranges",
"Content-Encoding",
"Content-Length",
"Content-Range"
],
"MaxAgeSeconds": 3000
}
]
For older instances use XML setting:
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedHeader>*</AllowedHeader> <MaxAgeSeconds>3000</MaxAgeSeconds> </CORSRule> </CORSConfiguration>
More Info: https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html
Buddy CDN
Goto Pull Zones -> Headers -> Add CORS Headers. Just add, js and pdf in the Extension list. If you are using images, add their extension to the list. Example: jpg, png, jpeg
Google Drive, Dropbox, One Drive
CORS access settings may not be available for servers like Google Drive, One Drive, or other file sharing services. They do so to protect their bandwidth. These solutions are possible for servers that are owned by the customers or have access to such settings.