Most Streamlined Way to use Basic Authentication with Web Application and CDN - html

I have a site whose pre-production environments use HTTP basic authentication to prevent unauthorized access. Recently, we've added a CDN (AWS Cloudfront) and we intend to use basic authentication (FWIW, using Lambda#Edge) for those pre-production CDN environments, as well.
While we've already implemented basic authentication on the web application (we're able to access the site after authentication), and have rudimentarily implemented basic authentication on the CDN (we're able to, say, access an image directly, after authentication), we're having trouble combining the two.
The web application includes images in the normal ways (e.g., via HTML and CSS includes). For instance, my site, https://www.example.com, has the following in its HTML:
<img src="https://cdn-files.example.com/foob.png" />
Using Chrome, when hitting the web application, I get a double-challenge (one for the app's domain and one for the CDN, each in turn), and the image loads.
Using Firefox, I get a single challenge, and the page loads, but the image fails to load (that request's response is 401).
Question 1: (Most streamlined option.) Is it possible, through the right configuration settings, to get the browser to pass through the credentials from the app's domain to the CDN domain? If so, what configurations are needed?
If not:
Question 2: (Less streamlined: Double-challenge.) What's the right combination of configurations (presumably, headers, etc.) to get the images, etc., to load on the web app?
I would prefer not to embed the credentials in the URLs, if at all possible.

Related

Best way to make cross-origin requests using cookies for own application in Chrome

I am making an ASP.NET application and would like to be able for my file upload to allow attachments to be dragged straight from Gmail. The problem is that I cannot load the data from the links dragged in because of cross-origin rules.
There are 2 problems:
First, cross-origin rules prevent me from making requests to the gmail attachment server.
Second, even if I were to make the request with cross-origin, the cookies would not be included.
I am using Chrome and only interested in doing this on my own computers.
One option is I could make a Chrome extension which allows cross-origin requests but only from my website.
Another option would be for my locally hosted server to communicate with Chrome to make the request itself.
Which of these would be the best option and how would I do it?

Offline web app using cache-control header?

Hi we have a mobile app (iOS and Android) that needs to display a few web pages using embedded UIWebView or WebView. These pages need to support offline browsing for 7-10 days. We are considering two alternatives - AppCache and cache-control header:
cache-control: max-age=604800
We ran many proof of concepts using both approaches. Both approaches seem to give us what we need. Cache-control seems to have the slight advantage that we can set its value in web server configuration using wildcard for all JS, CSS and image files. Where as for cache manifest we need to list each file individually.
Having said all that, I do not find anyone attempting to build an offline app using cache-control. Nearly all article and blog post uses AppCache. Is there something I am missing here?
One problem with using cache-control for offline is that the user would need to visit all the pages in the app before leaving, otherwise they would not get cached for use next time they visit. The App Cache lists all the required pages and caches them all straight away.
cache-control is also not designed to support offline apps (it would seem), and there are catches, such as browsers not loading from the cache in some circumstances. So you cannot guarantee that the browser will not try to send a request for the resource while offline (resulting in the page showing network failure).
Basically, if you want it to work reliably, you should use App Cache or Service Workers.

A good practice to set my custom domains on Heroku

Basically, Heroku gives you a domain named by default: XXX.herokuapp.com.
On my own, I have a set of REST apis that I would like to set on a domain named: api.myDomain.com.
On the same time, I have my HTML files (web view) distributed by the same server as the REST API.
It's similar to this; embedding static files on server in a dist folder.
I expect the domain serving those HTML/JS files to be www.myDomain.com.
I thought about putting them clearly on a distinct server dedicated to static files, but the fact is that Single Page Application should be controlled by a server, in order to make the refresh works (F5 redirecting to index.html), that's why I chose to use the same server as REST apis.
An alternative would be to dedicate ANOTHER server to treat only static files, independent of the REST Apis' server.
How to deal with both domains (api and www) while sources being on the same servers?
Or should I completely rethink the strategy?
You can just set both domains to direct to your page by setting it up in your app settings, but then I'm pretty sure that would mean api.myDomain.com/dist would show your static things, and www.myDomain.com could show your api things.
https://devcenter.heroku.com/articles/custom-domains
Another way you could do this might be by doing some things with your actual code, but we don't really know what your code is like right now.

Sending messages from file system html page to a chrome extension

I'm new to creating chrome extensions. I want to test sending messages from a web page to an extension as described here: https://developer.chrome.com/extensions/messaging#external-webpage.
I'd like to just use an html file in my file system, like "file:///C:/Users/johng/Documents/TestExtensionCall.html", to do the initial testing but the developer documentation indicates that you need to include "externally_connectable" in your extension manifest to expose the messaging api and the url pattern must include a second-level domain.
Can an html file from the file system be used to test sending messages from a web page to a chrome extension? Do I actually need to use a web page from a web site to do the testing?
Thanks,
John
For testing externally_connectable, you have1 to use a web server.
Though, you can still use a local development web server. Normally, it would have a localhost hostname, but you can specify an alias for it in your DNS hosts file, say, my.localhost, and it would satisfy Chrome's requirements.
See here for more information about the hosts file.
1 To the best of my knowledge

Possible to load external jpg and serve as local url? Redirect w/o .htaccess?

I'm hosting images for client websites. I want them to be able to link to the images locally ie. www.myclient.com/clip1.jpg but have the image actually loaded from www.mysite.com/clip1.jpg. The idea is to provide security/anonyminity so the client doesn't have to reveal that they are using my service (through the images on my site).
Can this be done without editing .htaccess?
Thanks,
skibulk
If you don't want to reveal where the final origin is, then the image has to come from the server that you want it to appear to come from. A redirect will reveal the real origin.
You can proxy the images with with Apache directives, the equivalent for whatever non-Apache server is in use, or a server side script (written in the language of your choice that is supported by the server).
Just copying the images would probably be the most efficient approach though.