Skip to main content
Guide4 min read

When Your Design System Leaks Permissions: Why Third-Party Components Are Secretly Camera-Happy

By The bee2.io Engineering Team at bee2.io LLC

Your website is basically a teenager who borrowed your car and forgot to mention they also invited three friends you've never met. Somewhere in your carefully crafted design system, a third-party component is casually asking your users for camera access, and you're standing there like "Wait, did I sign off on that?" Spoiler alert: you probably didn't.

Here's the thing about modern web development that nobody warns you about at conferences: your design tokens and shared components are like a communal refrigerator. Everyone throws stuff in, and nobody remembers who brought the suspicious leftovers. One innocent embed from a "trusted" service provider, and suddenly your entire product surface is broadcasting camera permission requests that make users nervous and make you look like you don't know what's happening on your own website. Which, statistically speaking, you might not. According to industry data, approximately 67% of teams don't have visibility into all third-party script behavior across their products.

The Design System Betrayal: When Components Come With Hidden Riders

Let's talk about the uncomfortable truth: your design system is probably harboring unwanted passengers. You've got a beautiful button component, a sleek modal dialog, maybe a video preview widget that your product team loves. One of these lives in your component library. It's used everywhere. It's perfect. It's also potentially requesting microphone and camera access through a third-party service you didn't know was piggy-backing on it.

When you centralize components (which is objectively correct, by the way), you also centralize risk. Fix it once, and every product surface improves instantly. But go wrong once, and every product surface looks like it's running a covert surveillance operation. The irony is delicious.

This happens because third-party embeds don't respect your design boundaries. They inject themselves into your shared components without asking permission - ironically, while also asking your users for permission. It's like someone moving into your apartment and then asking your guests for their credit card info.

Permissions-Policy: The Bouncer Your Design System Actually Needed

Enter Permissions-Policy (formerly Feature-Policy), which is basically a velvet rope at the nightclub of your browser features. This HTTP header tells third-party scripts what they can and cannot do with browser capabilities like camera, microphone, and geolocation.

Here's the practical move: declare what features each shared component is allowed to access, then bake that requirement into your design token documentation and component contracts. When a developer pulls in a button component from your system, the permissions restrictions come along automatically. It's like DRM for your design system, except actually useful and not evil.

  • Camera access: Explicitly deny unless the component's sole purpose is video conferencing
  • Microphone access: Same logic - if it's not about recording audio, it doesn't need the key
  • Geolocation: Really think hard about this one before allowing anything

Set a Permissions-Policy header like this in your infrastructure: Permissions-Policy: camera=(), microphone=(). Then, if a third-party script embedded in your components tries to request access, it gets blocked at the browser level. The user never sees the permission prompt. Your users don't get paranoid. Your PR team doesn't have a meltdown.

The best part? This scales across your entire product suite instantly. You're not hunting down individual components or nagging individual teams. You fix it at the system level, and suddenly everyone's website stops asking for the laptop camera.

Auditing Your Components Before They Audit Your Camera

Here's your action item, and it's actually worth doing: go through your design system inventory and ask each component owner a very specific question: "Does this thing need access to camera, microphone, or geolocation?" Most will say no. Some will say yes but won't be sure why. That uncertainty is your signal to dig deeper.

Then, document the permissions requirements in your design token specifications and component READMEs. Make it part of your component contract. If a component ships with an embedded third party that requires geolocation, that restriction lives in the documentation forever. Future developers know what they're inheriting.

Check your own site with automated scanning tools - you might be shocked what's lurking in your shared components right now. Better you find out by reading an article than by finding out when a user screenshots the permission request and posts it on social media with a confused emoji.

Disclaimer: This article is for informational purposes only and does not constitute legal, professional, or compliance advice. SCOUTb2 is an automated scanning tool that helps identify common issues but does not guarantee full compliance with any standard or regulation.

securityPermissions-Policybrowser APIsprivacy

Stop finding issues manually

SCOUTb2 scans your entire site for accessibility, performance, and SEO problems automatically.