The key thing is that plugins initialize by calling loadScene (which sends a message to Figma to get a copy of the document) and finish by calling updateScene (which sends the changes made by the plugin back to Figma). The is also a given a null origin, which means that any attempt to make a request to will be denied by the browser’s cross-origin resource sharing policies.Ĭonst scene = await figma.loadScene() // gets data from the main threadĪwait figma.updateScene() // flush changes back, to the main thread However, it won’t be able to interact with Figma documents except through explicit, whitelisted messages. The plugin can do anything it wants inside the. Now that we know how s work, we can implement plugins by creating a new every time a plugin runs, and sticking the plugin’s code inside the. They’re so isolated, in fact, that the HTML spec allow browsers to implement s as separate processes, if they chose to. Upon receipt, each website is free to take action on those message, or ignore them. These messages are, for all intents and purposes, plain strings. Then, the only way to communicate with the is via message-passing. When an has a different origin than its container (e.g. This means communication to and from the is heavily restricted by browsers. Similarly, you wouldn’t want Google to be able to read what’s inside a Yelp website just by virtue of having been embedded. There could be private user information in there. Here, you wouldn’t want Yelp to be able to read what’s inside a Google website just by virtue of embedding it. For example, in the screenshot below, you can see that is embedding /maps to provide map functionality. An is typically used to embed one website into another website. The is not your everyday HTML tag. To understand why s are secure, it’s necessary to think about what properties they need to guarantee. It’s used in applications that need to run third-party code, such as CodePen. In the end, for our first attempt, we went for the closest thing to a standard sandboxing solution: the tag. However, most had not been validated in a production application and as such, carried some risk. Some used techniques such as code-to-code transformation. If that idea excites you too, we’re hiring! Attempt #1: The sandbox approachĭuring our first few weeks of research, we found many interesting attempts at third-party code sandboxing. I had fun leveraging all the computer science fundamentals I learned in the classroom (the ones I never thought I’d ever use in the real world). This blog post will focus on just three of those attempts that formed the most central path in our exploration.įor me, it has been the most satisfying exercise in first principles thinking. We had weeks of discussing, prototyping and brainstorming. We considered dozens of different approaches branching into all sorts of different paths. To add to the challenge, Figma is built on a very unconventional stack with constraints that previous tools haven’t had. That is the quintessential definition of insecure! Yet, eval is essentially what running a plugin boils down to. To the extent that we could control it, we wanted users to have a better plugin experience with Figma.įurthermore, we wanted to make sure plugins would be safe for users to run, so we knew we wouldn’t want to simply eval(PLUGIN_CODE). In other cases, the plugins broke whenever new versions of the platform were released. In some cases, they slowed the tool to a crawl. Throughout the history of software, there have been many instances where third-party extensions negatively affected a platform. We knew we needed to design this plugin functionality carefully. They can enable accessibility checkers to measure contrast, translation apps to convert language, importers to populate designs with content, and anything else their heart desires. Our plugins API enables third-party developers to run code directly inside our browser-based design tool, so teams can adapt Figma to their own workflows. Learn about Figma's response to the security vulnerabilities that were reported in a 3rd-party library that we use for plugin security.Īt Figma, we recently tackled one of our biggest engineering challenges yet: supporting plugins.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |