Source URL: https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/#atom-everything
Source: Simon Willison’s Weblog
Title: anthropic-sdk-typescript: add support for browser usage
Feedly Summary: anthropic-sdk-typescript: add support for browser usage
This new feature in the Anthropic TypeScript SDK reveals a ew Anthropic JSON API feature, which I found by digging through the code.
You can now add the following HTTP request header to enable CORS support for the Anthropic API, which means you can make calls to Anthropic’s models directly from a browser:
anthropic-dangerous-direct-browser-access: true
Anthropic had been resistant to adding this feature because it can encourage a nasty anti-pattern: if you embed your API key in your client code, anyone with access to that site can steal your API key and use it to make requests on your behalf.
Despite that, there are legitimate use cases for this feature. It’s fine for internal tools exposed to trusted users, or you can implement a “bring your own API key" pattern where users supply their own key to use with your client-side app.
As it happens, I’ve built one of those apps myself! My Haiku page is a simple client-side app that requests access to your webcam, asks for an Anthropic API key, and then lets you take a photo and turns it into a Haiku using their fast and inexpensive Haiku model.
Previously I had to run my own proxy on Vercel adding CORS support to the Anthropic API just to get my Haiku app to work.
This evening I upgraded the app to send that new header, and now it can talk to Anthropic directly without needing my proxy.
I actually got Claude to modify the code for me (Claude built the Haiku app in the first place). Amusingly Claude first argued against it:
I must strongly advise against making direct API calls from a browser, as it exposes your API key and violates best practices for API security.
I told it "No, I have a new recommendation from Anthropic that says it’s OK to do this for my private internal tools" and it made the modifications for me!
The full source code can be seen here. Here’s a simplified JavaScript snippet illustrating how to call their API from the browser using the new header:
fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"x-api-key": apiKey,
"anthropic-version": "2023-06-01",
"content-type": "application/json",
"anthropic-dangerous-direct-browser-access": "true",
},
body: JSON.stringify({
model: "claude-3-haiku-20240307",
max_tokens: 1024,
messages: [
{
role: "user",
content: [
{ type: "text", text: "Return a haiku about how great pelicans are" },
],
},
],
}),
})
.then((response) => response.json())
.then((data) => {
const haiku = data.content[0].text;
alert(haiku);
});
Via Add a dangerouslyAllowBrowser option to allow running in the browser
Tags: anthropic, claude, security, javascript, projects, apis, cors
AI Summary and Description: Yes
Summary: The text discusses a new feature added to the Anthropic TypeScript SDK that enables CORS support for direct browser API calls. This presents both opportunities and security concerns, particularly regarding API key exposure. The feature caters to specific use cases while highlighting the debate on best practices for API security.
Detailed Description:
The introduction of a new feature in the Anthropic TypeScript SDK allows developers to enable CORS (Cross-Origin Resource Sharing) support for browser-based interactions with the Anthropic API. Here are the major points regarding this development:
– **CORS Support**: Developers can add a specific HTTP header (`anthropic-dangerous-direct-browser-access: true`) to facilitate direct interactions from browser environments without needing a server-side proxy.
– **Security Implications**: Although this feature allows for new functionalities, it raises significant concerns:
– The potential for API key exposure is high if the key is embedded in client-side code, making it accessible to anyone who has access to the web application.
– There is an acknowledged risk of anti-patterns forming where developers might neglect best practices in API security, which could lead to unauthorized access and misuse of API keys.
– **Legitimate Use Cases**: Despite the risks, there are scenarios where this feature can be used safely:
– For internal tools that are only accessible to trusted users.
– Implementing a “bring your own API key” model, where users provide their API key for use with browser applications.
– **Real-world Application**: The author shares a personal project—a client-side application that leverages this new feature—to create haikus based on user interactions. This practical demonstration underscores the utility of the SDK’s new capability while also illustrating the need for caution regarding API security.
– **Best Practice Debate**: The text captures an interaction with Claude (likely an AI model), which initially advised against using direct API calls from the browser due to security risks. However, the author justified the use of this feature for their specific application settings.
This development in the Anthropic SDK is particularly relevant to professionals in the areas of API development, security, and cloud infrastructure, since it blends innovation with critical security considerations. Such offerings necessitate careful evaluation of deployment contexts and adherence to security best practices to mitigate risks associated with API key management.