X-Frame-Options & iframe & CORS

[xgqfrms]

X-Frame-Options

iframe & CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

bug

[xgqfrms]

https://cn.bing.com/?intlF=&ensearch=1

如果服务器没配置，好像默认是禁用的（可以正常嵌入）。但是 页面的 js 执行不了.

[xgqfrms]

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

sandbox

[xgqfrms]

iframe & mdn

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

const showDOM = (url = ``) => {
    let iframeBox = $qs(`[data-img-box="empty-iframe-page-box"]`);
    let no_data = `
        <p data-no-data="p">
            <span data-no-data="span">暂无数据</span>
        </p>
    `;
    try {
        if (url) {
            let iframe = document.createElement(`iframe`);
            iframe.src = url;
            // sandbox
            // srcdoc
            iframe.style.height = `100%`;
            iframe.style.width = `100%`;
            iframe.style.minHeight = `300px`;
            iframe.style.minWidth = `500px`;
            iframe.setAttribute(`sandbox`, `allow-scripts`);
            iframe.setAttribute(`sandbox`, `allow-scripts`);
            iframe.setAttribute(`data-iframe`, `empty-iframe-page`);
            iframe.setAttribute(`name`, `页面空模块`);
            if (iframeBox) {
                iframeBox.innerHTML = "";
                iframeBox.insertAdjacentElement(`beforeend`, iframe);
            }
        }
    } catch (err) {
        // no data
        iframeBox.innerHTML = "";
        iframeBox.insertAdjacentHTML(`beforeend`, no_data);
        throw new Error(`fetch image error`, err);
    }
};

[xgqfrms]

https://community.tableau.com/thread/157316

https://www.digitalocean.com/community/questions/blocking-iframe-because-it-set-x-frame-options-to-deny

https://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin

jeduan/cordova-plugin-facebook4#323

[xgqfrms]

https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options#answer-7469997
https://developer.salesforce.com/forums/?id=906F00000009BRJIA2

https://blogs.msdn.microsoft.com/ie/2009/01/27/ie8-security-part-vii-clickjacking-defenses/

https://security.stackexchange.com/questions/67889/why-do-browsers-enforce-the-same-origin-security-policy-on-iframes

https://security.stackexchange.com/questions/167081/how-to-add-x-frame-options-header-to-a-simple-html-file

好像是服务器为了防止点击劫持，而设置的.

[xgqfrms]

X-Frame-Options

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Configuring_Apache

[xgqfrms]

OK

https://cn.bing.com/?intlF=&ensearch=1

https://cdn.xgqfrms.xyz/

x-frame-options: DENY

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

[xgqfrms]

X-Frame-Options

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Syntax

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/

[xgqfrms]

CSS & calc()

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

.editorconfig

https://editorconfig.org/

# .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[xgqfrms]

HTML5 Semantic Elements

https://www.w3schools.com/html/html5_semantic_elements.asp
https://www.w3schools.com/HTML/html5_new_elements.asp

[xgqfrms]

clearfix

https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

https://css-tricks.com/snippets/css/clear-fix/

.clear-fixed::after {
   /* box-sizing: border-box; */
    content: "";
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
    /* shit IE */
    zoom: 1;
    height: 0;
    font-size: 0;
}

css3 & vh & vw

https://snook.ca/archives/html_and_css/vm-vh-units

CSS Units

https://caniuse.com/#search=Units
https://www.w3schools.com/CSSref/css_units.asp
https://css-tricks.com/viewport-sized-typography/
https://css-tricks.com/fun-viewport-units/

[xgqfrms]

code snippets

{
    "JavaScript ES6 React Template": {
        "prefix": "js6r",
        "body": [
            "\"use strict\";",
            "",
            "/**",
            " * ",
            " * @author xgqfrms",
            " * @license MIT",
            " * @copyright xgqfrms",
            " * ",
            " * @description $2",
            " * @augments $3",
            " * @example $4",
            " * ",
            " */",
            "",
            "const $2Generator = ($5datas = [], debug = false) => {",
            "    let result = ``;",
            "    // do something...",
            "    return $7result;",
            "};",
            "",
            "",
            "",
            "export default $2;",
            "",
            "export {",
            "    $2,",
            "};",
            "",
        ],
        "description": "JavaScript ES6 React Template & code snippets!"
    }
}

{
    "CSS3 Template": {
        "prefix": "c3t",
        "body": [
            "@charset \"UTf-8\";",
            "",
            "/**",
            " * ",
            " * @author xgqfrms",
            " * @license MIT",
            " * @copyright xgqfrms",
            " * ",
            " * @description $1.css",
            " * ",
            " */",
            "",
            ":root {",
            "   --cololr: #000;",
            "   --default-cololr: #fff;",
            "   --new-cololr: #0f0;",
            "}",
        ],
        "description": "CSS3 Template & code snippets!"
    }
}

[xgqfrms]

纯前端 PDF 导出

https://www.grapecity.com.cn/developer/spreadjs
https://www.grapecity.com.cn/developer/spreadjs/editor#whatsnew
https://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples
https://demo.grapecity.com.cn/spreadjs/ExcelLikeSample/inspector.html

[xgqfrms]

online tools

https://www.xiaopiu.com/

https://hammerjs.github.io/

https://handlebarsjs.com/
https://github.com/wycats/handlebars.js/

[xgqfrms]

水印

文档添加自定义的个性图片水印

http://www.icanzc.com/word/6234.html

[xgqfrms]

钉钉 & 姓名字水印

http://blog.sina.com.cn/s/blog_14d40ba9a0102vv48.html

[xgqfrms]

https://www.jianshu.com/p/08041bcf0f23
https://www.zhihu.com/question/50735753

[xgqfrms]

css bug

<!DOCTYPE html>
<html>
<head>
<style>
p{
    position: relative;
    text-indent: 36px;
}
span{
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("paper.gif") no-repeat;
    color: #0f0;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
    left: 20px
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p> <span>X</span>This page has an image as the background!</p>

</body>
</html>

text-indent: 0px; & overflow: hidden;

https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

p{
    position: relative;
    text-indent: 36px;
}
span{
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("paper.gif") no-repeat;
    color: #0f0;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    text-indent: 0px;
    overflow: hidden;
}

@import & img path bug

@charset "UTf-8";

/* index.css */

@import url("./commons/reset.css");
@import url("./layout/aside.css");
@import url("./utils/accordion.css");

.accordion-item-title-icon {
    position: absolute;
    display: inline-block;
    width: 16px;
    height: 16px;
    color: #fff;
    background-color: #333333;
    /* @import & img path bug */
    background: url("../imgs/menus.png") no-repeat;
    background-position: 0 0;
    overflow: hidden;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    text-indent: 0;
}

[xgqfrms]

canvas

https://preview.pro.ant.design/#/dashboard/analysis

https://alibaba.github.io/
https://github.com/antvis/g2-react
https://github.com/alibaba/BizCharts

https://github.com/alibaba/G3D
https://github.com/alibaba/GCanvas

[xgqfrms]

scroll bug

https://preview.pro.ant.design/#/dashboard/analysis

app

[xgqfrms]

bing & clear

https://cn.bing.com/profile/history?oma=success:clear

[xgqfrms]

how to minify html by using webpack 3?

https://github.com/bestander/html-minify-loader

https://github.com/jantimon/html-webpack-plugin
https://github.com/kangax/html-minifier#options-quick-reference

https://stackoverflow.com/questions/36031931/how-to-minify-html-templates-using-angular2-and-webpack

[xgqfrms]

minify html

OK

    new HtmlWebpackPlugin({
        template: "./src/html/index.html",
        filename: "./index.html",
        chunks: ["index"],
        // chunks: ["app", "main"],// load modules order ??? fifo
        hash: true,
        // minify: true,
        minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
        },
    }),

webpack minify html template bug code demo ?

https://stackoverflow.com/questions/36031931/how-to-minify-html-templates-using-angular2-and-webpack

[xgqfrms]

// minify html
    new HtmlWebpackPlugin({
        template: "src/index.html",
        chunksSortMode: "none",
        minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            removeTagWhitespace: true,
            removeRedundantAttributes: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }
    }),

https://github.com/gdi2290/angular-starter

[xgqfrms]

OK

it's ok now

1. jsut remove inject: false,

2. manaully setting multi pages

    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        chunks: ["app"],
        template: "./src/html/app.html",
        filename: "./pages/app.html"
        // filename: "./pages/[name].html"
    }),
    new HtmlWebpackPlugin({
        // inject: false,
        hash: true,
        chunks: ["main"],
        template: "./src/html/main.html",
        filename: "./pages/main.html"
    }),
    new HtmlWebpackPlugin({
        template: "./src/html/index.html",
        filename: "./index.html",
        chunks: ["index"],
        // chunks: ["app", "main"],// load modules order ??? fifo
        hash: true,
        // minify: true,
        minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
        },
    }),

[xgqfrms]

https://www.cnblogs.com/xgqfrms/p/10402875.html