Merge pull request #149 from edgio-docs/polyfillio-replace

polyfillio-replace example

examples/polyfill_io-replace/.github/pull_request_template.md

@@ -0,0 +1,5 @@
+**NOTICE TO CONTRIBUTORS**
+
+This repository is not actively monitored and any pull requests made to this repository will be closed/ignored.
+
+Please submit the pull request to [edgio-docs/edgio-examples](https://github.com/edgio-docs/edgio-examples) instead.

examples/polyfill_io-replace/.github/workflows/edgio.yml

@@ -0,0 +1,18 @@
+name: Deploy to Edgio
+
+on:
+  workflow_dispatch:
+  push:
+
+jobs:
+  deploy-to-edgio:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: if [ -f yarn.lock ]; then yarn install; else npm ci; fi
+      - run: if [ -f yarn.lock ]; then yarn edgio:deploy -- --token=$EDGIO_DEPLOY_TOKEN; else npm run edgio:deploy -- --token=$EDGIO_DEPLOY_TOKEN; fi
+        env:
+          EDGIO_DEPLOY_TOKEN: ${{secrets.EDGIO_DEPLOY_TOKEN}}

examples/polyfill_io-replace/.gitignore

@@ -0,0 +1,4 @@
+# Edgio generated build directory
+/.edgio
+
+/node_modules

examples/polyfill_io-replace/README.md

@@ -0,0 +1,41 @@
+# Polyfill.io Replacement with Edge Functions
+
+https://edgio-community-examples-polyfill.io-replace-live.edgio.link/
+
+## Description
+
+This repository provides example code for transforming HTML content using Edge Functions. It includes a specific example of replacing polyfill.io script URLs with a different third-party CDN (cdnjs.cloudflare.com) to serve polyfills, enhancing security and performance. The code modifies the content using the `HtmlTransformer` class and streams responses to the transformer.
+
+## Prerequisites
+
+**NOTE**: To use this project, you must be an Edgio customer and signed up for the Edge Functions. See our [Edge Functions documentation](https://docs.edg.io/guides/v7/edge-functions) for information on activating this feature.
+
+The system requirements include Node.js v18 or higher and a UNIX-like system (Linux or macOS). The project code is written in JavaScript.
+
+## Setup and Installation
+
+1. Ensure you meet the prerequisites.
+2. Clone the repository to your local machine.
+3. Run `npm install` in the repository directory.
+
+## Getting Started
+
+After setting up the project, run `npm run edgio:dev` to start a local development server to test the example functions.
+
+To deploy the project to Edgio, use the command `npm run edgio:deploy`. Note that deployment to Edgio requires you to be
+logged into Edgio CLI which can be done via `npm run edgio login` and following the instructions.
+
+## Security Consideration
+
+In light of recent discussions on potential supply chain attacks targeting polyfill services, it is crucial to mitigate the risks associated with relying on third-party scripts. By replacing polyfill.io URLs with those from a trusted CDN, this edge function helps protect your application from vulnerabilities that could be exploited through less secure or compromised content delivery networks.
+
+## Support
+
+If you have any queries or face issues with this project, please don't hesitate to contact
+the [Edgio team](https://edg.io/contact-support/).
+
+## License
+
+[Creative Commons Attribution 4.0 International Public License](LICENSE-CONTENT) for the documentation.
+
+[MIT License](LICENSE-CODE) for the code.

examples/polyfill_io-replace/edge-functions/main.js

@@ -0,0 +1,26 @@
+export async function handleHttpRequest(request, context) {
+  const baseReplacementUrl = 'https://cdnjs.cloudflare.com';
+  const srcPrefixes = [
+    'https://polyfill.io',
+    'http://polyfill.io',
+    '//polyfill.io',
+  ];
+
+  const transformerDefinitions = srcPrefixes.map((prefix) => ({
+    selector: `script[src^="${prefix}"]`,
+    element: async (el) => {
+      const src = el.get_attribute('src');
+      el.set_attribute('src', src.replace(prefix, baseReplacementUrl));
+    },
+  }));
+
+  // Get the HTML from static test file and stream the response body through the HtmlTransformer
+  return fetch('/polyfill.io-usage', { edgio: { origin: 'edgio_self' } }).then(
+    (response) => HtmlTransformer.stream(transformerDefinitions, response)
+  );
+
+  // Use the following code to serve the original content from your origin server
+  // return fetch(request.url, { edgio: { origin: 'my-origin' } }).then(
+  //   (response) => HtmlTransformer.stream(transformerDefinitions, response)
+  // );
+}

examples/polyfill_io-replace/edgio.config.js

@@ -0,0 +1,91 @@
+// This file was automatically added by edgio init.
+// You should commit this file to source control.
+// Learn more about this file at https://docs.edg.io/guides/edgio_config
+module.exports = {
+  // The name of the site in Edgio to which this app should be deployed.
+  name: "edgio-polyfill.io-replace-example",
+
+  // The name of the organization in Edgio to which this app should be deployed.
+  // organization: 'my-organization-name',
+
+  // Overrides the default path to the routes file. The path should be relative to the root of your app.
+  // routes: 'routes.js',
+
+  // When set to true, Edgio includes the deployment number in the cache key,
+  // effectively purging the cache each time you deploy.
+  purgeCacheOnDeploy: true,
+  // If omitted this will default to the "Automatic Purging" configuration on the environment's Caching tab.
+  // purgeCacheOnDeploy: false,
+
+  origins: [
+    {
+      // The name of the backend origin
+      name: "origin",
+
+      // Use the following to override the host header sent from the browser when connecting to the origin
+      override_host_header: "test-origin.edgio.net",
+
+      // The list of origin hosts to which to connect
+      hosts: [
+        {
+          // The domain name or IP address of the origin server
+          location: "test-origin.edgio.net",
+        },
+      ],
+
+      tls_verify: {
+        use_sni: true,
+        sni_hint_and_strict_san_check: "test-origin.edgio.net",
+      },
+
+      // Uncomment the following to configure a shield
+      // shields: { us_east: 'DCD' },
+    },
+  ],
+
+  // Uncomment the following to specify environment specific configs
+  // environments: {
+  //   production: {
+  //     hostnames: [{ hostname: 'www.mysite.com' }],
+  //   },
+  //   staging: {
+  //     hostnames: [{ hostname: 'staging.mysite.com' }],
+  //     origins: [
+  //       {
+  //         name: 'origin',
+  //         hosts: [{ location: 'staging-origin.mysite.com' }],
+  //         override_host_header: 'staging-origin.mysite.com',
+  //         tls_verify: {
+  //           use_sni: true,
+  //           sni_hint_and_strict_san_check: 'staging-origin.mysite.com',
+  //         },
+  //         shields: { us_east: 'DCD' },
+  //       },
+  //     ],
+  //   },
+  // },
+
+  // Options for hosting serverless functions on Edgio
+  // serverless: {
+  //   // Set to true to include all packages listed in the dependencies property of package.json when deploying to Edgio.
+  //   // This option generally isn't needed as Edgio automatically includes all modules imported by your code in the bundle that
+  //   // is uploaded during deployment
+  //   includeNodeModules: true,
+  //
+  //   // Include additional paths that are dynamically loaded by your app at runtime here when building the serverless bundle.
+  //   include: ['views/**/*'],
+  // },
+
+  // The maximum number of URLs that will be concurrently prerendered during deployment when static prerendering is enabled.
+  // Defaults to 200, which is the maximum allowed value.
+  // prerenderConcurrency: 200,
+
+  // A list of glob patterns identifying which source files should be uploaded when running edgio deploy --includeSources.
+  // This option is primarily used to share source code with Edgio support personnel for the purpose of debugging. If omitted,
+  // edgio deploy --includeSources will result in all files which are not gitignored being uploaded to Edgio.
+  //
+  // sources : [
+  //   '**/*', // include all files
+  //   '!(**/secrets/**/*)', // except everything in the secrets directory
+  // ],
+};