HTML5 & template & polyfill

[xgqfrms]

HTML5 & template & polyfill

html templates

https://caniuse.com/#search=html%20templates

polyfill

https://www.webcomponents.org/polyfills/

https://stackoverflow.com/questions/16055275/html-templates-javascript-polyfills

---

https://github.com/jeffcarp/template-polyfill

http://jsfiddle.net/brianblakely/h3EmY/

createDocumentFragment

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description H5TemplatePolyfill
 * @augments
 * @example
 *
 */

// const H5TemplatePolyfillGenerator = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default H5TemplatePolyfill;

// export {
//     H5TemplatePolyfill,
// };

function templatePolyfill() {
    if ("content" in document.createElement("template")) {
        return false;
    }
    var templates = document.getElementsByTagName("template");
    var plateLen = templates.length;
    for (var x = 0; x < plateLen; ++x) {
        var template = templates[x];
        var content = template.childNodes;
        var fragment = document.createDocumentFragment();
        while (content[0]) {
            fragment.appendChild(content[0]);
        }
        template.content = fragment;
    }
}

// module.exports = templatePolyfill;

[xgqfrms]

html import polyfill

https://caniuse.com/#search=html%20Imports

https://www.w3.org/TR/html-imports/

https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports

polyfill

https://github.com/webcomponents/webcomponentsjs

https://github.com/polymer/HTMLImports

https://github.com/webcomponents/html-imports

blogs

http://blog.teamtreehouse.com/introduction-html-imports

https://hacks.mozilla.org/2015/06/the-state-of-web-components/

http://www.robdodson.me/exploring-html-imports/

[xgqfrms]

HTML Web Components

https://github.com/webcomponents/webcomponentsjs

https://github.com/webcomponents/webcomponentsjs#browser-support

webcomponents.js

(v1 spec polyfills)

https://github.com/webcomponents/webcomponentsjs/tree/v1

https://github.com/webcomponents/webcomponentsjs/tree/v1#how-to-use

# IE 11
# webcomponents-lite.js

https://github.com/webcomponents/webcomponentsjs/tree/v1#browser-support

[xgqfrms]

feature detection

Modernizr: the feature detection library for HTML5/CSS3

https://modernizr.com/

[xgqfrms]

https://github.com/AshleyScirra/html-imports-polyfill/blob/master/htmlimports.js https://github.com/webcomponents/html-imports/blob/master/src/html-imports.js

[xgqfrms]

IE 11

OK

Edge

OK

FF

OK

https://cdn.xgqfrms.xyz/HTML5/html-imports/index.html

https://cdn.xgqfrms.xyz/HTML5/html-imports/polyfill.html

[xgqfrms]

createDocumentFragment

[xgqfrms]

https://ckeditor.com/

[xgqfrms]

https://github.com/gjunge/rateit.js https://gjunge.github.io/rateit.js/examples/

[xgqfrms]

https://github.com/you-dont-need

https://github.com/getify/You-Dont-Know-JS

原生的 ES5/ES6，还是比较重要的，所有的框架都是基于这些的，所以 vanilla js 性能理论上因该是最好的。

[xgqfrms]

auto downlaod pdf

https://codepen.io/xgqfrms/full/GyEGzG/

Blob

application/pdf

http://keyangxiang.com/2017/09/01/HTML5-XHR-download-binary-content-as-Blob/

https://blog.jayway.com/2017/07/13/open-pdf-downloaded-api-javascript/

data:application/pdf;base64,

https://stackoverflow.com/questions/33494377/download-a-pdf-with-filesaver-js-and-blob

jspdf

https://parall.ax/products/jspdf https://github.com/MrRio/jsPDF

---

https://stackoverflow.com/questions/tagged/jspdf https://plnkr.co/5NonsdQ23nXwFchV01sB

---

https://davidwalsh.name/fetch

https://en.pdf24.org/blob-2-pdf.html

---

OK

pdf

let url = `http://10.1.5.202:8110/pdf/url`;

let obj = {
    "sourceHtmlUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/calc",
    "fileName":"html-to-pdf"
};

fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/pdf; charset=utf-8",
            // "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => res.blob())
    .then(blob => {
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        console.log(`a =`, a);
        // pdf
        a.setAttribute(`download`, "test.pdf");
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });

image/png

let url = `http://10.1.5.202:8110/image/url`;

let obj = {
    "sourceHtmlUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/calc",
    "fileName":"html-to-image"
};

fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/pdf; charset=utf-8",
            // "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => res.blob())
    .then(blob => {
        // base64
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        console.log(`a =`, a);
        // png
        a.setAttribute(`download`, "test.png");
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });

[xgqfrms]

html to pdf

https://wkhtmltopdf.org/usage/wkhtmltopdf.txt

https://github.com/wkhtmltopdf/wkhtmltopdf

html to pdf libs java

https://pdfcrowd.com/doc/api/html-to-pdf/java/ https://docraptor.com/documentation/java https://stackoverflow.com/questions/2685395/a-java-library-for-converting-xml-html-to-pdf https://www.javaworld.com/article/2071749/java-app-dev/convert-html-content-to-pdf-format.html

https://stackoverflow.com/questions/19786113/export-html-page-to-pdf-on-user-click-using-javascript

[xgqfrms]

html to pdf

https://github.com/search?q=html+to+pdf

perfect

node

https://github.com/alvarcarto/url-to-pdf-api#examples https://github.com/alvarcarto/url-to-pdf-api#development

---

https://github.com/linwalker/render-html-to-pdf

https://github.com/coolwanglu/pdf2htmlEX

https://github.com/marcbachmann/node-html-pdf

[xgqfrms]

url to pdf & url to png

https://github.com/xgqfrms/url-to-pdf-api

https://url-to-pdf-api.herokuapp.com/api/render?url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

https://url-to-pdf-api.herokuapp.com/api/render?output=screenshot&url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

POST

https://github.com/alvarcarto/url-to-pdf-api#post-apirender---json

puppeteer

Headless Chrome

https://github.com/GoogleChrome/puppeteer

[xgqfrms]

CMD & Admin

npm install

HTTPS

???

let url = ` https://url-to-pdf-api.herokuapp.com/api/render`,
    obj = {
        // url: "https://developer.mozilla.org/en-US/docs/Web/CSS/calc",
        url: "http://10.1.5.202/test/index.html?skin=white&ucode=44003#",// inner network error & 503
        output: "pdf",
        // output: "screenshot",
    };

fetch(url,
    {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
        },
        body: JSON.stringify(obj),
    })
    .then(res => res.blob())
    .then(blob => {
        // base64
        let objectURL = URL.createObjectURL(blob);
        let a = document.createElement(`a`);
        a.href = objectURL;
        console.log(`a =`, a);
        let title = document.querySelector(`title`).innerText;
        // png
        // a.setAttribute(`download`, `${title}.png`);
        // pdf
        a.setAttribute(`download`, `${title}.pdf`);
        a.click();
    })
    .catch((err) => {
        console.log(`There has been a problem with your fetch operation: `, err);
    });

[xgqfrms]

NVM

https://github.com/xyz-data/RAIO/issues/242#issuecomment-347425411

https://zhuanlan.zhihu.com/p/22493707

[xgqfrms]

HTTPS

如何在本地 启用 https

https://letsencrypt.org/ https://www.freessl.com/

https://imcn.me/html/y2017/32098.html

https://www.ssl2buy.com/wiki/how-to-get-ssl-certificate-for-web-applications-that-runs-on-localhost

https://developer.salesforce.com/blogs/developer-relations/2011/05/generating-valid-self-signed-certificates.html https://www.codeproject.com/questions/374676/ssl-security-certificate-error-for-localhost

自签名CA证书

在host 文件把你的域名解析到127.0.0.1 然后在本地配置ssl

https://www.openssl.org/source/ https://github.com/openssl/openssl

https://www.cnblogs.com/anlia/p/5920820.html

[xgqfrms]

https://laod.cn/hosts/2018-google-hosts.html

C:\Windows\System32\drivers\etc

# Localhost (DO NOT REMOVE) Start
# 127.0.0.1 localhost
127.0.0.1   localhost
127.0.0.1   www.webgeeker.xyz
#127.0.0.1  https://www.webgeeker.xyz

ipconfig /flushdns

[xgqfrms]

CA

C:\OpenSSL\bin

chrome://settings/

http://bubuko.com/infodetail-2162684.html http://www.voidcn.com/article/p-emjwkgnr-bcr.html

[xgqfrms]

OpenSSL

# 1. 生成服务器端的私钥( root.key文件):
$ openssl genrsa -des3 -out root.key 1024
# 密码为：123456

# 2. 请求建立证书的申请文件 root.csr: (输入国家，省份，城市，公司信息，证书发送邮箱地址和证书密码：)
$ openssl req -new -key root.key -out root.csr
# 密码为：123456

# 3. 创立一个为期10年的根证书 root.crt
$ openssl x509 -req -days 3650 -sha1 -extensions v3_ca -signkey root.key -in root.csr -out root.crt
# 密码为：123456

# 4. 建立服务器证书秘钥：
$ openssl genrsa -des3 -out server.key 2048
# 密码为：123456

# 5. 创立服务器证书申请文件 (输入国家，省份，城市，公司信息，证书发送邮箱地址和证书密码：)
$ openssl req -new -key server.key -out server.csr
# 密码为: 123456

# 6. 创立一个为期 2年的服务器证书 server.crt
$ openssl x509 -req -days 730 -md5 -extensions v3_req -CA root.crt -CAkey root.key -CAcreateserial -in server.csr -out server.crt
# 密码为：123456

[xgqfrms]

域名

注意：此时需要输入除Common Name (eg, YOUR name) []外与创建CA根证书时相同的信息。此处Common Name 应该输入服务器（Server）的Ip或域名（与在浏览器地址栏需要访问的保持一致）

http://www.dongcoder.com/detail-588709.html

http://seanlook.com/2015/01/18/openssl-self-sign-ca/

https://www.openssl.org/docs/man1.0.2/apps/x509v3_config.html#Subject-Alternative-Name

http://vmwareeuc.blog.51cto.com/8606576/1945888 http://blog.51cto.com/vmwareeuc/1945888

http://blog.51yip.com/apachenginx/958.html http://www.cnblogs.com/popsuper1982/p/3843772.html

https://blog.csdn.net/napolunyishi/article/details/42425827 http://blog.51cto.com/tanxw/1379417

[xgqfrms]

Windows、macOS和Linux平台设置HTTPS以及自签名证书详细指南

https://yq.aliyun.com/articles/214383

http://www.4hou.com/tools/7417.html

https://www.humankode.com/asp-net-core/develop-locally-with-https-self-signed-certificates-and-asp-net-core

[xgqfrms]

https://www.eff.org/https-everywhere

[xgqfrms]

openssl.cnf

IP & DNS ???

#
# OpenSSL example configuration file.
# This is mostly being used for generation of certificate requests.
#

# This definition stops the following lines choking if HOME isn't
# defined.
HOME            = .
RANDFILE        = $ENV::HOME/.rnd

# Extra OBJECT IDENTIFIER info:
#oid_file       = $ENV::HOME/.oid
oid_section     = new_oids

# To use this configuration file with the "-extfile" option of the
# "openssl x509" utility, name here the section containing the
# X.509v3 extensions to use:
# extensions        = 
# (Alternatively, use a configuration file that has only
# X.509v3 extensions in its main [= default] section.)

[ new_oids ]

# We can add new OIDs in here for use by 'ca', 'req' and 'ts'.
# Add a simple OID like this:
# testoid1=1.2.3.4
# Or use config file substitution like this:
# testoid2=${testoid1}.5.6

# Policies used by the TSA examples.
tsa_policy1 = 1.2.3.4.1
tsa_policy2 = 1.2.3.4.5.6
tsa_policy3 = 1.2.3.4.5.7

####################################################################
[ ca ]
default_ca  = CA_default        # The default ca section

####################################################################
[ CA_default ]

dir     = ./demoCA      # Where everything is kept
certs       = $dir/certs        # Where the issued certs are kept
crl_dir     = $dir/crl      # Where the issued crl are kept
database    = $dir/index.txt    # database index file.
#unique_subject = no            # Set to 'no' to allow creation of
                    # several ctificates with same subject.
new_certs_dir   = $dir/newcerts     # default place for new certs.

certificate = $dir/cacert.pem   # The CA certificate
serial      = $dir/serial       # The current serial number
crlnumber   = $dir/crlnumber    # the current crl number
                    # must be commented out to leave a V1 CRL
crl     = $dir/crl.pem      # The current CRL
private_key = $dir/private/cakey.pem# The private key
RANDFILE    = $dir/private/.rand    # private random number file

x509_extensions = usr_cert      # The extentions to add to the cert

# Comment out the following two lines for the "traditional"
# (and highly broken) format.
name_opt    = ca_default        # Subject Name options
cert_opt    = ca_default        # Certificate field options

# Extension copying option: use with caution.
# copy_extensions = copy

# Extensions to add to a CRL. Note: Netscape communicator chokes on V2 CRLs
# so this is commented out by default to leave a V1 CRL.
# crlnumber must also be commented out to leave a V1 CRL.
# crl_extensions    = crl_ext

default_days    = 365           # how long to certify for
default_crl_days= 30            # how long before next CRL
default_md  = default       # use public key default MD
preserve    = no            # keep passed DN ordering

# A few difference way of specifying how similar the request should look
# For type CA, the listed attributes must be the same, and the optional
# and supplied fields are just that :-)
policy      = policy_match

# For the CA policy
[ policy_match ]
countryName     = match
stateOrProvinceName = match
organizationName    = match
organizationalUnitName  = optional
commonName      = supplied
emailAddress        = optional

# For the 'anything' policy
# At this point in time, you must list all acceptable 'object'
# types.
[ policy_anything ]
countryName     = optional
stateOrProvinceName = optional
localityName        = optional
organizationName    = optional
organizationalUnitName  = optional
commonName      = supplied
emailAddress        = optional

####################################################################
[ req ]
default_bits        = 2048
default_keyfile     = privkey.pem
distinguished_name  = req_distinguished_name
attributes      = req_attributes
x509_extensions = v3_ca # The extentions to add to the self signed cert

# Passwords for private keys if not present they will be prompted for
# input_password = secret
# output_password = secret

# This sets a mask for permitted string types. There are several options. 
# default: PrintableString, T61String, BMPString.
# pkix   : PrintableString, BMPString (PKIX recommendation before 2004)
# utf8only: only UTF8Strings (PKIX recommendation after 2004).
# nombstr : PrintableString, T61String (no BMPStrings or UTF8Strings).
# MASK:XXXX a literal mask value.
# WARNING: ancient versions of Netscape crash on BMPStrings or UTF8Strings.
string_mask = utf8only

# req_extensions = v3_req # The extensions to add to a certificate request

[ req_distinguished_name ]
countryName         = Country Name (2 letter code)
countryName_default     = AU
countryName_min         = 2
countryName_max         = 2

stateOrProvinceName     = State or Province Name (full name)
stateOrProvinceName_default = Some-State

localityName            = Locality Name (eg, city)

0.organizationName      = Organization Name (eg, company)
0.organizationName_default  = Internet Widgits Pty Ltd

# we can do this but it is not needed normally :-)
#1.organizationName     = Second Organization Name (eg, company)
#1.organizationName_default = World Wide Web Pty Ltd

organizationalUnitName      = Organizational Unit Name (eg, section)
#organizationalUnitName_default =

commonName          = Common Name (e.g. server FQDN or YOUR name)
commonName_max          = 64

emailAddress            = Email Address
emailAddress_max        = 64

# SET-ex3           = SET extension number 3

[ req_attributes ]
challengePassword       = A challenge password
challengePassword_min       = 4
challengePassword_max       = 20

unstructuredName        = An optional company name

[ usr_cert ]

# These extensions are added when 'ca' signs a request.

# This goes against PKIX guidelines but some CAs do it and some software
# requires this to avoid interpreting an end user certificate as a CA.

basicConstraints=CA:FALSE

# Here are some examples of the usage of nsCertType. If it is omitted
# the certificate can be used for anything *except* object signing.

# This is OK for an SSL server.
# nsCertType            = server

# For an object signing certificate this would be used.
# nsCertType = objsign

# For normal client use this is typical
# nsCertType = client, email

# and for everything including object signing:
# nsCertType = client, email, objsign

# This is typical in keyUsage for a client certificate.
# keyUsage = nonRepudiation, digitalSignature, keyEncipherment

# This will be displayed in Netscape's comment listbox.
nsComment           = "OpenSSL Generated Certificate"

# PKIX recommendations harmless if included in all certificates.
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

# This stuff is for subjectAltName and issuerAltname.
# Import the email address.
# subjectAltName=email:copy
# An alternative to produce certificates that aren't
# deprecated according to PKIX.
# subjectAltName=email:move

# Copy subject details
# issuerAltName=issuer:copy

#nsCaRevocationUrl      = http://www.domain.dom/ca-crl.pem
#nsBaseUrl
#nsRevocationUrl
#nsRenewalUrl
#nsCaPolicyUrl
#nsSslServerName

# This is required for TSA certificates.
# extendedKeyUsage = critical,timeStamping

[ v3_req ]

# Extensions to add to a certificate request

basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment

[ v3_ca ]

# Extensions for a typical CA

# PKIX recommendation.

subjectKeyIdentifier=hash

authorityKeyIdentifier=keyid:always,issuer

# This is what PKIX recommends but some broken software chokes on critical
# extensions.
#basicConstraints = critical,CA:true
# So we do this instead.
basicConstraints = CA:true

# Key usage: this is typical for a CA certificate. However since it will
# prevent it being used as an test self-signed certificate it is best
# left out by default.
# keyUsage = cRLSign, keyCertSign

# Some might want this also
# nsCertType = sslCA, emailCA

# Include email address in subject alt name: another PKIX recommendation
# subjectAltName=email:copy
# Copy issuer details
# issuerAltName=issuer:copy

# DER hex encoding of an extension: beware experts only!
# obj=DER:02:03
# Where 'obj' is a standard or added object
# You can even override a supported extension:
# basicConstraints= critical, DER:30:03:01:01:FF

[ crl_ext ]

# CRL extensions.
# Only issuerAltName and authorityKeyIdentifier make any sense in a CRL.

# issuerAltName=issuer:copy
authorityKeyIdentifier=keyid:always

[ proxy_cert_ext ]
# These extensions should be added when creating a proxy certificate

# This goes against PKIX guidelines but some CAs do it and some software
# requires this to avoid interpreting an end user certificate as a CA.

basicConstraints=CA:FALSE

# Here are some examples of the usage of nsCertType. If it is omitted
# the certificate can be used for anything *except* object signing.

# This is OK for an SSL server.
# nsCertType            = server

# For an object signing certificate this would be used.
# nsCertType = objsign

# For normal client use this is typical
# nsCertType = client, email

# and for everything including object signing:
# nsCertType = client, email, objsign

# This is typical in keyUsage for a client certificate.
# keyUsage = nonRepudiation, digitalSignature, keyEncipherment

# This will be displayed in Netscape's comment listbox.
nsComment           = "OpenSSL Generated Certificate"

# PKIX recommendations harmless if included in all certificates.
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer

# This stuff is for subjectAltName and issuerAltname.
# Import the email address.
# subjectAltName=email:copy
# An alternative to produce certificates that aren't
# deprecated according to PKIX.
# subjectAltName=email:move

# Copy subject details
# issuerAltName=issuer:copy

#nsCaRevocationUrl      = http://www.domain.dom/ca-crl.pem
#nsBaseUrl
#nsRevocationUrl
#nsRenewalUrl
#nsCaPolicyUrl
#nsSslServerName

# This really needs to be in place for it to be a proxy certificate.
proxyCertInfo=critical,language:id-ppl-anyLanguage,pathlen:3,policy:foo

####################################################################
[ tsa ]

default_tsa = tsa_config1   # the default TSA section

[ tsa_config1 ]

# These are used by the TSA reply generation only.
dir     = ./demoCA      # TSA root directory
serial      = $dir/tsaserial    # The current serial number (mandatory)
crypto_device   = builtin       # OpenSSL engine to use for signing
signer_cert = $dir/tsacert.pem  # The TSA signing certificate
                    # (optional)
certs       = $dir/cacert.pem   # Certificate chain to include in reply
                    # (optional)
signer_key  = $dir/private/tsakey.pem # The TSA private key (optional)

default_policy  = tsa_policy1       # Policy if request did not specify it
                    # (optional)
other_policies  = tsa_policy2, tsa_policy3  # acceptable policies (optional)
digests     = md5, sha1     # Acceptable message digests (mandatory)
accuracy    = secs:1, millisecs:500, microsecs:100  # (optional)
clock_precision_digits  = 0 # number of digits after dot. (optional)
ordering        = yes   # Is ordering defined for timestamps?
                # (optional, default: no)
tsa_name        = yes   # Must the TSA name be included in the reply?
                # (optional, default: no)
ess_cert_id_chain   = no    # Must the ESS cert id chain be included?
                # (optional, default: no)

[xgqfrms]

https://github.com/alvarcarto/url-to-pdf-api/issues/81

https://blog.csdn.net/starboybenben/article/details/50549739

# "特征名称"字段包含了用户的标识信息
[ req_distinguished_name ]
countryName = CN  #只能使用2字母的国家代码
stateOrProvinceName = 省份或直辖市名称
organizationName = 组织名
commonName = 网站的全限定域名

[xgqfrms]

OK ?

C:\OpenSSL\bin>openssl genrsa -des3 -out root.key 1024
Generating RSA private key, 1024 bit long modulus
..++++++
.........++++++
e is 65537 (0x10001)
Enter pass phrase for root.key:
Verifying - Enter pass phrase for root.key:

C:\OpenSSL\bin>openssl req -new -key root.key -out root.csr
Enter pass phrase for root.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [CN]:CN
State or Province Name (full name) [Some-State]:Shang-Hai
Locality Name (eg, city) []:Pudong
Organization Name (eg, company) [Internet Widgits Pty Ltd]:webgeeker.xyz
Organizational Unit Name (eg, section) []:webgeeker.xyz
Common Name (e.g. server FQDN or YOUR name) []:webgeeker.xyz
Email Address []:xgqfrms@webgeeker.xyz

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:123456
An optional company name []:www.webgeeker.xyz

C:\OpenSSL\bin>openssl x509 -req -days 3650 -sha1 -extensions v3_ca -signkey root.key -in root.csr -out root.crt
Signature ok
subject=/C=CN/ST=Shang-Hai/L=Pudong/O=webgeeker.xyz/OU=webgeeker.xyz/CN=webgeeker.xyz/emailAddress=xgqfrms@webgeeker.xyz
Getting Private key
Enter pass phrase for root.key:

C:\OpenSSL\bin>openssl genrsa -des3 -out server.key 2048
Generating RSA private key, 2048 bit long modulus
.....+++
.............................................+++
e is 65537 (0x10001)
Enter pass phrase for server.key:
Verifying - Enter pass phrase for server.key:

C:\OpenSSL\bin>openssl req -new -key server.key -out server.csr
Enter pass phrase for server.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [CN]:CN
State or Province Name (full name) [Some-State]:Shang-Hai
Locality Name (eg, city) []:Pudong
Organization Name (eg, company) [Internet Widgits Pty Ltd]:webgeeker.xyz
Organizational Unit Name (eg, section) []:webgeeker.xyz
Common Name (e.g. server FQDN or YOUR name) []:webgeeker.xyz
Email Address []:xgqfrms@webgeeker.xyz

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:123456
An optional company name []:www.webgeeker.xyz

C:\OpenSSL\bin>openssl x509 -req -days 730 -md5 -extensions v3_req -CA root.crt -CAkey root.key -CAcreateserial -in server.csr -out server.crt
Signature ok
subject=/C=CN/ST=Shang-Hai/L=Pudong/O=webgeeker.xyz/OU=webgeeker.xyz/CN=webgeeker.xyz/emailAddress=xgqfrms@webgeeker.xyz
Getting CA Private Key
Enter pass phrase for root.key:

C:\OpenSSL\bin>

[xgqfrms]

OpenSSL

# 1. 生成服务器端的私钥( root.key文件):
$ openssl genrsa -des3 -out root.key 1024
# 密码为：123456

# 2. 请求建立证书的申请文件 root.csr: (输入国家，省份，城市，公司信息，证书发送邮箱地址和证书密码：)
$ openssl req -new -key root.key -out root.csr
# 密码为：123456

# 3. 创立一个为期10年的根证书 root.crt
$ openssl x509 -req -days 3650 -sha1 -extensions v3_ca -signkey root.key -in root.csr -out root.crt
# 密码为：123456

# 4. 建立服务器证书秘钥：
$ openssl genrsa -des3 -out server.key 2048
# 密码为：123456

# 5. 创立服务器证书申请文件 (输入国家，省份，城市，公司信息，证书发送邮箱地址和证书密码：)
$ openssl req -new -key server.key -out server.csr
# 密码为: 123456

# 6. 创立一个为期 2年的服务器证书 server.crt
$ openssl x509 -req -days 730 -md5 -extensions v3_req -CA root.crt -CAkey root.key -CAcreateserial -in server.csr -out server.crt
# 密码为：123456

[xgqfrms]

bug

all false bug

x = 'true';
!x;
// false
x = 'false';
!x;
// false

y = true;
!y;
// false
y = false;
!y;
// true

[xgqfrms]

solution

https://github.com/alvarcarto/url-to-pdf-api/issues/81#issuecomment-421318757

config.js

app.js

.env

CMD & shell

[xgqfrms]

HTTPS

https://github.com/FiloSottile/mkcert#macos

https://github.com/FiloSottile/mkcert#windows

https://github.com/FiloSottile/mkcert/releases

go

https://golang.org/

https://golang.org/doc/install?download=go1.11.windows-amd64.msi

https://github.com/FiloSottile/mkcert/issues/73

[xgqfrms]

what's wrong with this ?

C:\Users\xxx\AppData\Local\mkcert

[xgqfrms]

.exe path bug

solution

remame .exe & cd to the right path

but the * is not work, why?

[xgqfrms]

https://laod.cn/hosts/2018-google-hosts.html

C:\Windows\System32\drivers\etc

# Localhost (DO NOT REMOVE) Start
# 127.0.0.1 localhost
127.0.0.1   localhost
127.0.0.1   www.webgeeker.xyz
#127.0.0.1  https://www.webgeeker.xyz

ipconfig /flushdns

[xgqfrms]

HTTPS & express server

https://blog.mgechev.com/2014/02/19/create-https-tls-ssl-application-with-express-nodejs/

https://stackoverflow.com/questions/11744975/enabling-https-on-express-js

https://www.hacksparrow.com/express-js-https-server-client-example.html

https server

const https = require('https');
const express = require('express');
const fs = require('fs');

// const fs = require('fs');

// OpenSSL
const privateKey = fs.readFileSync('./https/https-ssl/server.key');
const certificate = fs.readFileSync('./https/https-ssl/server.crt');

// pem
// const privateKey = fs.readFileSync('./https/ssl/webgeeker.xyz+3-key.pem');
// const certificate = fs.readFileSync('./https/ssl/webgeeker.xyz+3.pem');

const credentials = {
    key: privateKey,
    cert: certificate,
};

const app = express();
// const app = express.createServer(credentials);

https.createServer(credentials, app).listen(8888);

app.get('/', function (req, res) {
    console.log('req =', req);
    res.header('Content-type', 'text/html');
    return res.end('<h1>Hello, HTTPS!</h1>');
});

[xgqfrms]

[xgqfrms]

OK

https & express sever

const https = require('https');
const express = require('express');
const fs = require('fs');

// const fs = require('fs');

// OpenSSL
// const privateKey = fs.readFileSync('./https-ssl/server.key');
// const certificate = fs.readFileSync('./https-ssl/server.crt');

// pem
const privateKey = fs.readFileSync('./ssl/webgeeker.xyz+3-key.pem');
const certificate = fs.readFileSync('./ssl/webgeeker.xyz+3.pem');

const credentials = {
    key: privateKey,
    cert: certificate,
};

const app = express();
// const app = express.createServer(credentials);
// https://localhost:8888

https.createServer(credentials, app).listen(8888);

app.get('/', function (req, res) {
    console.log('req =', req);
    res.header('Content-type', 'text/html');
    return res.end('<h1>Hello, HTTPS!</h1>');
});

[xgqfrms]

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost

# Copyright (c) 2014-2017, racaljk.
# https://github.com/racaljk/hosts
# Last updated: 2017-10-08

# https://laod.cn/hosts/2017-google-hosts.html

# This work is licensed under a CC BY-NC-SA 4.0 International License.
# https://creativecommons.org/licenses/by-nc-sa/4.0/

# Modified Hosts Start

# Localhost (DO NOT REMOVE) Start
# 127.0.0.1 localhost
127.0.0.1   localhost

127.0.0.1   www.webgeeker.xyz
127.0.0.1   webgeeker.xyz
#127.0.0.1  https://www.webgeeker.xyz

::1 webgeeker.xyz
::1 localhost
::1 ip6-localhost
::1 ip6-loopback
# Localhost (DO NOT REMOVE) End

[xgqfrms]

https://github.com/FiloSottile/mkcert/issues/73#issuecomment-421368378

testing

http://localhost:9000/api/render?url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples http://localhost:9000/api/render?output=screenshot&url=https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Examples

css3 layout & no query args url & bug

http://localhost:9000/api/render?url=http://10.1.5.202/fv/index.html http://localhost:9000/api/render?output=screenshot&url=http://10.1.5.202/fv/index.html