Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@applitools/dom-snapshot
Advanced tools
Script for extracting resources and DOM in CDT format, to serve as the input for rendering a screenshot with the visual grid.
@applitools/dom-snapshot is a package designed to capture and serialize the DOM and its resources, such as stylesheets and images, into a format that can be used for visual testing and other purposes. This is particularly useful for ensuring that web pages render correctly across different browsers and devices.
Capture DOM Snapshot
This feature allows you to capture a snapshot of the DOM, including all its resources, using a headless browser like Puppeteer. The snapshot can then be used for visual testing or other purposes.
const { takeDomSnapshot } = require('@applitools/dom-snapshot');
async function captureSnapshot(page) {
const snapshot = await takeDomSnapshot({
executeScript: page.evaluate.bind(page),
browser: {
userAgent: await page.evaluate(() => navigator.userAgent),
viewportSize: await page.viewport()
}
});
console.log(snapshot);
}
// Usage with Puppeteer
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await captureSnapshot(page);
await browser.close();
})();
Serialize DOM Snapshot
This feature allows you to serialize the captured DOM snapshot into a JSON string. This serialized snapshot can be stored or transmitted for later use in visual testing or other applications.
const { takeDomSnapshot } = require('@applitools/dom-snapshot');
async function serializeSnapshot(page) {
const snapshot = await takeDomSnapshot({
executeScript: page.evaluate.bind(page),
browser: {
userAgent: await page.evaluate(() => navigator.userAgent),
viewportSize: await page.viewport()
}
});
const serializedSnapshot = JSON.stringify(snapshot);
console.log(serializedSnapshot);
}
// Usage with Puppeteer
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await serializeSnapshot(page);
await browser.close();
})();
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. While Puppeteer itself does not specialize in capturing and serializing DOM snapshots, it can be used in conjunction with other tools to achieve similar results. Puppeteer is more general-purpose and can be used for a wide range of browser automation tasks.
Selenium WebDriver is a tool for automating web application testing, and it allows you to programmatically control a browser. Like Puppeteer, Selenium WebDriver does not specialize in capturing and serializing DOM snapshots but can be used in combination with other tools to achieve similar functionality. Selenium is more versatile in terms of browser support compared to Puppeteer.
Cypress is a JavaScript end-to-end testing framework that aims to make testing web applications easier. While Cypress focuses on testing, it also provides capabilities to capture the state of the DOM. However, it is not specifically designed for capturing and serializing DOM snapshots like @applitools/dom-snapshot.
Script for extracting resources and DOM in CDT format, to serve as the input for rendering a screenshot with the visual grid.
npm install @applitools/dom-snapshot
This package exports functions that can be used when working with puppeteer, CDP or Selenium in Node.js:
getProcessPageScript
getProcessPageAndSerializeScript
These async functions return a string with a function that can be sent to the browser for evaluation. It doesn't immediately invoke the function, so the sender should wrap it as an IIFE. For example:
const {getProcessPageAndSerializeScript} = require('@applitools/dom-snapshot');
const processPageAndSerializeScript = await getProcessPageAndSerializeScript();
const returnValue = await page.evaluate(`(${processPageAndSerializeScript})()`); // puppeteer
By using the non bundled version of the scripts:
src/browser/processPage
src/browser/processPageAndSerialize
These functions can then be bundled together with other client-side code so they are consumed regardless of a browser driver (this is how the Eyes.Cypress SDK uses it).
This package's dist
folder contains scripts that can be sent to the browser regradless of driver and language. An agent that wishes to extract information from a webpage can read the contents of dist/processPageAndSerialize
and send that to the browser as an async script. There's still the need to wrap it in a way that invokes it.
For example in Java
with Selenium WebDriver:
String domCaptureScript = "var callback = arguments[arguments.length - 1]; return (" + PROCESS_RESOURCES + ")().then(JSON.stringify).then(callback, function(err) {callback(err.stack || err.toString())})";
Object response = driver.executeAsyncScript("const callback = arguments[arguments.length - 1];(" + processPageAndSerialize + ")().then(JSON.stringify).then(callback, function(err) {callback(err.stack || err.toString())})";
Note for Selenium WebDriver users: The return value must not include objects with the property nodeType
. Browser drivers interpret those as HTML nodes, and thus corrupt the result. A possible remedy to this is to JSON.stringify
the result before sending it back to the calling process. That's what we're doing in the example above.
processPage
scriptThis script receives a document, and returns an object with the following:
url
- the URL of the document.cdt
- a flat array representing the document's DOM in CDT format.resourceUrls
- an array of strings with URL's of resources that appear in the page's DOM or are referenced from a CSS resource but are cross-origin and therefore could not be fetched from the browser.blobs
- an array of objects with the following structure: {url, type, value}
. These are resources that the browser was able to fetch. The type
property is the Content-Type
response header. The value
property contains an ArrayBuffer with the content of the resource.processPage
return value: {url, cdt, resourceUrls, blobs, frames}
.The script scans the DOM for resource references, fetches them, and then also scans the body of css resources for more references, and so on recursively.
FAQs
Unknown package
The npm package @applitools/dom-snapshot receives a total of 318,551 weekly downloads. As such, @applitools/dom-snapshot popularity was classified as popular.
We found that @applitools/dom-snapshot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 57 open source maintainers 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.