/alpine-chrome

Chrome Headless docker images built upon alpine official image

Primary LanguageDockerfileApache License 2.0Apache-2.0

Docker Build Status Docker Pulls Layers Version

All Contributors

Supported tags and respective Dockerfile links

  • latest, 83 (Dockerfile)
  • with-node, 83-with-node, 83-with-node-12 (Dockerfile)
  • with-puppeteer, 83-with-puppeteer (Dockerfile)
  • with-playwright, 83-with-playwright (Dockerfile)
  • 81, 80, 77, 76, 73, 72, 71, 68, 64
  • 81-with-node, 80-with-node, 77-with-node, 76-with-node
  • 81-with-puppeteer, 80-with-puppeteer, 77-with-puppeteer, 76-with-puppeteer

alpine-chrome

Chrome running in headless mode in a tiny Alpine image

Why this image

We often need a headless chrome. We created this image to get a fully headless chrome image. Be careful to the "--no-sandbox" flag from Chrome

3 ways to securely use Chrome Headless with this image

❌ With nothing

Launching the container using only docker container run -it zenika/alpine-chrome ... will fail with some logs similar to #33.

Please use the 3 others ways to use Chrome Headless.

✅ With --no-sandbox

Launch the container using:

docker container run -it --rm zenika/alpine-chrome and use the --no-sandbox flag for all your commands.

Be careful to know the website you're calling.

Explanation for the no-sandbox flag in a quick introduction here and for More in depth design document here

✅ With SYS_ADMIN capability

Launch the container using: docker container run -it --rm --cap-add=SYS_ADMIN zenika/alpine-chrome

This allows to run Chrome with sandboxing but needs unnecessary privileges from a Docker point of view.

✅ The best: With seccomp

Thanks to ever-awesome Jessie Frazelle seccomp profile for Chrome. This is The most secure way to run this Headless Chrome docker image.

chrome.json

Also available here wget https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json

Launch the container using: docker container run -it --rm --security-opt seccomp=$(pwd)/chrome.json zenika/alpine-chrome

How to use in command line

Default entrypoint

The default entrypoint does the following command: chromium-browser --headless --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage

You can get full control by overriding the entrypoint using: docker container run -it --rm --entrypoint "" zenika/alpine-chrome chromium-browser ...

Use the devtools

Command (with no-sandbox): docker container run -d -p 9222:9222 zenika/alpine-chrome --no-sandbox --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222 https://www.chromestatus.com/

Open your browser to: http://localhost:9222 and then click on the tab you want to inspect. Replace the beginning https://chrome-devtools-frontend.appspot.com/serve_file/@.../inspector.html?ws=localhost:9222/[END] by chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/[END]

Print the DOM

Command (with no-sandbox): docker container run -it --rm zenika/alpine-chrome --no-sandbox --dump-dom https://www.chromestatus.com/

Print a PDF

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome --no-sandbox --print-to-pdf --hide-scrollbars https://www.chromestatus.com/

Take a screenshot

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome --no-sandbox --screenshot --hide-scrollbars https://www.chromestatus.com/

Size of a standard letterhead.

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome --no-sandbox --screenshot --hide-scrollbars --window-size=1280,1696 https://www.chromestatus.com/

Nexus 5x

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome --no-sandbox --screenshot --hide-scrollbars --window-size=412,732 https://www.chromestatus.com/

Screenshot owned by current user (by default the file is owned by the container user)

Command (with no-sandbox): docker container run -u `id -u $USER` -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome --no-sandbox --screenshot --hide-scrollbars --window-size=412,732 https://www.chromestatus.com/

How to use with Deno

Go the deno src folder. Build your image using this command:

docker image build -t zenika/alpine-chrome:with-deno-sample .

Then launch the container:

docker container run -it --rm zenika/alpine-chrome:with-deno-sample
 Download https://deno.land/std/examples/welcome.ts
 Warning Implicitly using master branch https://deno.land/std/examples/welcome.ts
 Compile https://deno.land/std/examples/welcome.ts
 Welcome to Deno 🦕

With your own file, use this command:

docker container run -it --rm -v $(pwd):/usr/src/app zenika/alpine-chrome:with-deno-sample run helloworld.ts
Compile file:///usr/src/app/helloworld.ts
Download https://deno.land/std/fmt/colors.ts
Warning Implicitly using master branch https://deno.land/std/fmt/colors.ts
Hello world!

How to use with Puppeteer

With tool like "Puppeteer", we can add a lot things with our Chrome Headless.

With some code in NodeJS, we can improve and make some tests.

See the "with-puppeteer" folder for more details.

If you have a NodeJS/Puppeteer script in your src folder named pdf.js, you can launch it using the following command:

docker container run -it --rm -v $(pwd)/src:/usr/src/app/src --cap-add=SYS_ADMIN zenika/alpine-chrome:with-puppeteer node src/pdf.js

With the "wqy-zenhei" library, you could also manipulate asian pages like in "screenshot-asia.js"

docker container run -it --rm -v $(pwd)/src:/usr/src/app/src --cap-add=SYS_ADMIN zenika/alpine-chrome:with-puppeteer node src/screenshot-asia.js

These websites are tested with the following supported languages:

  • Chinese (with https://m.baidu.com)
  • Japanese (with https://www.yahoo.co.jp/)
  • Korean (with https://www.naver.com/)

How to use with Playwright

Like "Puppeteer", we can do a lot things using "Playwright" with our Chrome Headless.

Go to the with-playwright folder and launch the following command:

docker container run -it --rm -v $(pwd)/src:/usr/src/app/src --cap-add=SYS_ADMIN zenika/alpine-chrome:with-playwright node src/useragent.js

A example-chromium.png file will be created in your with-playwright/src folder.

How to use with WebGL

By default, this image works with WebGL.

If you want to disable it, make sure to add --disable-gpu when launching Chromium.

The with-webgl tag still exists but is deprecated. It will be removed before end of August 2020.

docker container run -it --rm --cap-add=SYS_ADMIN -v $(pwd):/usr/src/app zenika/alpine-chrome --screenshot --hide-scrollbars https://webglfundamentals.org/webgl/webgl-fundamentals.html

docker container run -it --rm --cap-add=SYS_ADMIN -v $(pwd):/usr/src/app zenika/alpine-chrome --screenshot --hide-scrollbars https://browserleaks.com/webgl

Links:

Run as root and override default entrypoint

We can run the container as root with this command:

docker container run --rm -it --entrypoint "" --user root zenika/alpine-chrome sh

Run examples

Some examples are available on the examples directory:

  • docker-compose to launch a chrome calling a nginx server in the same docker-compose
  • x11 to experiment this image with a X11 server.

References

Versions (in latest)

Alpine version

docker run -it --rm --entrypoint "" zenika/alpine-chrome cat /etc/alpine-release
3.12.0

Chrome version

docker run -it --rm --entrypoint "" zenika/alpine-chrome chromium-browser --version
Chromium 83.0.4103.97

Image disk size

docker image inspect zenika/alpine-chrome --format='{{.Size}}'
392274511

✨ Contributors

Thanks goes to these wonderful people (emoji key):


Julien Landuré

💻 👀 ⚠️ 🤔 💬 🚧

Yonggang Luo

💻 🤔 💬

Dennis Koch

💻 🤔 💬

Sargon Piraev

💻

Eric Briand

💻

栩风

💻 🤔

Roman Pushkin

💻

Juan Lladó

💻

Chris Watson

🐛

Wang Guan

🐛

Óscar Soto Sánchez

🐛

Calinoiu Alexandru Nicolae

🐛

Mark Macdonald

🐛

Felix Mann

🐛

horacimacias

🐛

Emil Kjer

🐛

Jeff Gonzalez

🐛

George Gaál

🐛

wheestermans31

🐛

Hodossy, Szabolcs

🐛

Corentin Ardeois

🐛

Danny Althoff

💬

Chad Wilson

💬 🤔

fenchu

🐛

nrawat151290

🐛

x0rzkov

🐛 🤔

Jakob Ketterl

🐛

Piotr Sikora

🐛 🤔

Pierre Grimaud

💻

Niek van der Maas

💬 🤔

llange

🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

🎉 Show your support

⭐️ this repo or leave a comment here

💚 Support this repository using GitHub Sponsor