fix: prevent XSS in profile fields and repair theme/CSS/CI bugs (#10)

Author: rocktimsaikia

.github/workflows/main.yml

@@ -3,34 +3,24 @@ on:
   push:
     branches:
       - master
+  pull_request:
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Begin CI...
-        uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - name: Use Node 12
-        uses: actions/setup-node@v1
+      - name: Use Node 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 12.x
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Use cached node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            nodeModules-
+          node-version: 20.x
 
+      # --legacy-peer-deps tolerates rollup-plugin-uglify's stale rollup<2 peer
+      # range. Drop this once the build plugin is replaced (e.g. @rollup/plugin-terser).
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-        env:
-          CI: true
+        run: npm install --legacy-peer-deps
 
       - name: Lint
-        run: yarn lint
-        env:
-          CI: true
+        run: npm run lint

readme.md README.mdreadme.md renamed to README.md

@@ -0,0 +1,12 @@
+// Escape user-controlled values (e.g. GitHub name/bio) before injecting them
+// into the card's innerHTML, to prevent HTML/attribute injection.
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export default escapeHtml;

src/escape.js

@@ -1,6 +1,7 @@
 /* eslint no-undef: 0 */
 import widgetStyle from './style.js';
 import nFormatter from './format.js';
+import escapeHtml from './escape.js';
 
 const template = document.createElement('template');
 
@@ -19,13 +20,13 @@ class myCard extends HTMLElement {
     this._shadowRoot.append(template.content.cloneNode(true));
   }
 
-  get observedAttribute() {
+  static get observedAttributes() {
     return ['data-theme'];
   }
 
   attributeChangedCallback(attr, oldValue, newValue) {
-    if (attr === 'data-theme' && oldValue !== newValue && newValue !== '') {
-      this[attr] = newValue;
+    if (attr === 'data-theme' && oldValue !== newValue) {
+      this.setTheme(newValue);
     }
   }
 
@@ -34,11 +35,6 @@ class myCard extends HTMLElement {
       const cardTemplate = this.createCard(response);
       this._shadowRoot.querySelector('.card').innerHTML = cardTemplate;
     });
-
-    if (this.getAttribute('data-theme')) {
-      const theme = this.getAttribute('data-theme');
-      this.setTheme(theme);
-    }
   }
 
   setTheme(theme) {
@@ -62,31 +58,37 @@ class myCard extends HTMLElement {
   }
 
   createCard(user) {
+    const login = escapeHtml(user.login);
+    const htmlUrl = escapeHtml(user.html_url);
+    const name = escapeHtml(user.name);
+    const bio = escapeHtml(user.bio ?? '');
     return `
         <div class="cover"></div>
         <div class="card-wrapper">
-        <a href="https://github.com/${user.login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
+        <a href="https://github.com/${login}" target="_blank" rel="noopener"><img id="github-logo" src="https://i.ibb.co/frv5pB3/github-logo.png" alt="github-logo" border="0"></a>
         <div class="card-header">
-        <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${user.login}"/></div>
-        <h1><a class="card-title" href="${user.html_url}" target="_blank" rel="noopener">${user.name}</a></h1>
-        <div class="card-responsename"><a href="${user.html_url}" target="_blank" rel="noopener">@${user.login}</a></div>
-        <p class="card-desc">${user.bio ?? ''}</p>
+        <div class="card-img-wrapper"><img src="https://avatars.githubusercontent.com/${login}" alt="${name}"/></div>
+        <h1><a class="card-title" href="${htmlUrl}" target="_blank" rel="noopener">${name}</a></h1>
+        <div class="card-responsename"><a href="${htmlUrl}" target="_blank" rel="noopener">@${login}</a></div>
+        <p class="card-desc">${bio}</p>
         <div class="card-footer">
         <div class="footer-box">
             <div class="box-wrapper">
                 <div class="count">${nFormatter(user.followers)}</div>
                 <div class="box-text">Followers</div>
-            </div>   
+            </div>
             <div class="box-wrapper">
                 <div class="count">${nFormatter(user.following)}</div>
                 <div class="box-text">Following</div>
-            </div>  
+            </div>
             <div class="box-wrapper">
                 <div class="count">${nFormatter(user.public_repos)}</div>
                 <div class="box-text">Repositories</div>
             </div>
         </div>
         </div>
+        </div>
+        </div>
         `;
   }
 }

src/index.js

@@ -118,7 +118,7 @@ a{
     position: relative;
 }
 .card .card-footer .footer-box .box-wrapper .count {
-    font-family: 'consolas'
+    font-family: 'consolas';
     color: #434343;
     font-size: 20px;
     font-weight: 600;