![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
import-html-entry
Advanced tools
Readme
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
<!-- subApp/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!-- mark the entry script with entry attribute -->
<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js" entry></script>
<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
</body>
</html>
import importHTML from 'import-html-entry';
importHTML('./subApp/index.html')
.then(res => {
console.log(res.template);
res.execScripts().then(exports => {
const mobx = exports;
const { observable } = mobx;
observable({
name: 'kuitos'
})
})
});
string
- required, URL of the index HTML.ImportEntryOpts
- optional, Load configuration.Promise<IImportResult>
ImportEntryOpts
typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean }
- optional, Custom fetch method.
utf-8
(like gbk
or gb2312
), default is false
.(entry: Entry) => string
- optional, Customize the assets public path.(tpl: string) => string
- optional, Customize the HTML template before proceeding.IImportResult
string
- Processed HTML template.string
- Public path for assets.Promise<string[]>
- Scripts URL from template.Promise<string[]>
- StyleSheets URL from template.(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise<unknown>
- the return value is the last property on window
or proxy window
which set by the entry script.
sandbox
.ExecScriptsHooks
(code: string, script: string) => string | void
- optional, call it before executing each script, if return value
is a string, replace code
with return value
.
(code: string, script: string) => void
- optional, call it after executing each script, and the call will stop if the execution error occurs.
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
import importHTML from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => `${entry}/newPublicPath/`,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
importHTML('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});
Entry
- required, URL of the index HTML or assets.ImportEntryOpts
- optional, Load configuration.Promise<IImportResult>
string | { styles?: string[], scripts?: string[], html?: string }
- When type as string, importEntry will run as importHTML, otherwise will load scripts and add styleSheets in your HTML string which you're provided or not.
Other type as same as importHTML.
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
import { importEntry } from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => `${entry}/newPublicPath/`,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
const entryOpts = {
styles: [
'https://unpkg.com/antd@3.13.6/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/react@16.4.2/umd/react.production.min.js'
],
html: `<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
</body>
</html>`
}
importEntry('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});
string
- required, The URL of entry assets (will use last of scripts when entry is null).string[]
- required, The URL for scripts (should always include entry when entry is valid URL).Window
- required, Window or proxy window.ExecScriptsOpts
- optional, Exec configuration.Promise<T>
- The returned value is the last property on window
or proxy window
which set by the entry script.typeof window.fetch
- optional, Custom fetch method.boolean
- optional, Strictly enforce the sandbox
.(exports: unknown) => void
- optional, Use callback to get the result when successfully.
CallableFunction
- optional, Use callback to get the result when error.Loads the scripts by URL on the custom sandbox, get the exports from entry script.
import { execScripts } from 'import-html-entry';
const scripts = [
'https://demo.com/entry.js',
'https://unpkg.com/react@16.4.2/umd/react.production.min.js'
]
execScripts(
'https://demo.com/entry.js',
scripts,
windows, // or custom sandbox
{
fetch: (...args) => window.fetch(...args),,
strictGlobal: true,
success: () => {},
error: () => {},
}
);
execScripts
different from my expectation (e.g. {}
/ null
/ other values)?The execScripts
will return the last property on window
or proxy window
which is set by the entry script. If the html entry has more than one script that is deferred, the resolved value of execScripts
will be the value set by the last script, which may not be as expected.
To solve this problem, make sure the entry script is the last in the html entry. For example, if you are using html-webpack-plugin
, you can set scriptLoading: 'blocking'
in the plugin options.
FAQs
import html and get the exports of entry
The npm package import-html-entry receives a total of 15,408 weekly downloads. As such, import-html-entry popularity was classified as popular.
We found that import-html-entry demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.