Many of the items in GitHub have a readme file, and many people like to add their own creations or cover pictures to their files, such as Substack a logo for each of his projects. These images can be displayed directly on the page in GitHub, but the URL is replaced with GitHub. For example, in the Browserify project, the link to the logo became
Copy Code code as follows:
https://camo.githubusercontent.com/e19e230a9371a44a2eeb484b83ff4fcf8c824cf7/ 687474703a2f2f737562737461636b2e6e65742f696d616765732f62726f777365726966795f6c6f676f2e706e67
And we see raw can find the original URL is
Copy Code code as follows:
Yun_qi_img/browserify_logo.png
One of the benefits of doing this is to prevent an HTTP link from appearing in the HTTPS Web site, or you will get a risk warning on the client. GitHub is very thoughtful in detail.
Since there is a need, we will implement it. The usual practice is to write an application to crawl remote static resources, and then feed back to the front end, which is a simple reverse proxy. But this is more cumbersome, efficiency is not high, in fact, we can directly through the Nginx to proxy these static files.
Nginx's Proxy_pass support fills in any address, and DNS resolution is supported. So my idea is to encrypt the original URL into the URL of the website itself. Like the top.
Copy Code code as follows:
Yun_qi_img/browserify_logo.png
can be encrypted into
Copy Code code as follows:
764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea (encryption and serialization algorithms online there are many , I will not repeat it here.)
and put it under our own domain name:
Copy Code code as follows:
https://ssl.youdomain.com/camo/ 764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
The decryption step with Nginx will be difficult to achieve, so when the user through the link request, first speak the request pass to the decryption program, here is a coffeescript version of the example:
Copy Code code as follows:
Express = Require ' express '
App = Express ()
App.get '/camo/:eurl ', (req, res)->
{Eurl} = Req.params
{Camosecret} = config # Use your own key here
Rawurl = Util.decrypt Eurl, Camosecret
Return Res.status (403). End (' INVALID URL ') unless Rawurl
Res.set ' X-origin-url ', Rawurl
Res.set ' X-accel-redirect ', '/remote '
Res.end ()
App.listen 3000
Then write the x-accel-redirect response header to do the internal jump, the following steps are completed by Nginx.
The following is an example of a complete nginx configuration file:
Copy Code code as follows:
server {
Listen 80;
server_name ssl.youdomain.com;
location/camo/{
Proxy_pass http://localhost:3000;
Proxy_set_header X-real-ip $remote _addr;
Proxy_set_header x-forwarded-for $proxy _add_x_forwarded_for;
Proxy_set_header Host $http _host;
Proxy_set_header X-nginx-proxy true;
Proxy_http_version 1.1;
Proxy_set_header Upgrade $http _upgrade;
Proxy_set_header Connection "Upgrade";
Proxy_redirect off;
Break
}
Location/remote {
Internal
Resolver 192.168.0.21; # must add DNS server address, otherwise nginx cannot resolve domain name
Set $origin _url $upstream _http_x_origin_url;
Proxy_pass $origin _url;
Add_header Host "file.local.com";
Break
}
}
Nginx's upstream module saves all response headers as a variable with the $upstream _http_ prefix, so in the above example we put the original URL in the X-origin-url response header and the nginx becomes the $upstream _htt P_x_origin_url variable, but in the proxy_pass can not be directly referenced, not to be set to the reference, I do not understand, I hope to have a master to answer.
So down every time when the user requests
Copy Code code as follows:
https://ssl.youdomain.com/camo/ 764feebffb1d3f877e9e0d0fadcf29b85e8fe84ae4ce52f7dc4ca4b3e05bf1718177870a996fe5804a232fcae5b893ea
, Nginx is going to crawl
Copy Code code as follows:
Yun_qi_img/browserify_logo.png
is returned to the user. We can also add varnish before nginx to cache the contents of static files. This is more consistent with Githubusercontent's approach.
