背景

接到一个任务,要给一个网站换脸,但是因为网站是由ASP.NET输出的,模板是用的DustJS,完全没有用过,而且后台配置简直要老命,所以索性用JS加CSS来做。

但是遇到一个问题,因为需要大量的CSS,每次刷新以后CSS会重置,难道要给每一个元素都一遍遍的去加么,这个不现实。JS到还好,直接从编辑器里复制一遍运行即可,但是CSS就不能这样做了。

问题一

第一个想到是让Chrome加载本地CSS,印象中应该是有插件支持的,应用本地化的CSS列表,但是难道不装插件就不行么?然后想到,不如直接在JS里面加上

1
$(document.head).append('<link rel="stylesheet" href="path/to/css">');

这样就可以在运行JS的时候直接把CSS也用上了。

然后就试了试,发现不行,因为这个站是HTTPS站,所以会报mixin content的错,原因就是Chrome不会让HTTPS站加载任何非HTTPS源的资源。而我这个是file:///协议,所以肯定不允许,那么就用Python的simpleHTTPServer吧,但是这个模块不能做HTTPS服务,难道要用自己的服务器提供HTTPS服务么?

问题二

抱着一线希望,搜了搜Python simple https server,没想到真在Github上找到了一个gist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# taken from http://www.piware.de/2011/01/creating-an-https-server-in-python/
# generate server.xml with the following command:
# openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
# run as follows:
# python simple-https-server.py
# then in your browser, visit:
# https://localhost:4443

import BaseHTTPServer, SimpleHTTPServer
import ssl

httpd = BaseHTTPServer.HTTPServer(('localhost', 4443), SimpleHTTPServer.SimpleHTTPRequestHandler)
httpd.socket = ssl.wrap_socket (httpd.socket, certfile='./server.pem', server_side=True)
httpd.serve_forever()

就这样,新建一个Python文件,复制这些,然后按照注释里面在当前文件夹下生产一个crtfile就可以了。

把相应的JS代码改成这个,加载由Python server提供的CSS文件,

1
$(document.head).append('<link rel="stylesheet" href="https://localhost:4443/xxx.css">');

问题三

运行以后,果然还是报错,因为这里并没有签名,所以Chrome是不会认的。

解决办法就是直接打开这个文件,然后Google会不让你继续访问,但是你可以点击高级选项然后选择继续,这样就可以直接访问了。

对于这种虽然是服务器上发来的,当实质是本地文件,对于我们自己来说是可信任的,所以可以做一个一劳永逸的方法, 在Chrome中输入

1
chrome://flags/

然后搜索”允许通过 HTTPS 向本地主机发送请求”,选择启用,然后重启Chrome即可。