Introducing Feature Obfuscation: dark launching done right

Why it's hard to truly dark launch

Feature flags are often used to hide upcoming features before release; this is the core premise of a dark launch. The idea is that you remove a feature from view or access in the UI and that is enough to conceal it from users.

However, that isn't sufficient in all cases, as it may be important to ensure that no trace of the feature can be found in the code that is shipped to users. This is particularly important on the web, where it's possible to inspect webpages, navigate source code and monitor network calls. On the web, even when code is obfuscated, any strings containing text from the new feature will still be present in the bundle, as well as in any network calls relating to that feature’s rollout. With the availability of that information, interested users can often infer the nature of a feature they can't access. This may lead to sensitive or strategic information being leaked, like an as-yet-unannounced feature.

How we're solving the problem

To prevent this type of leak, DevCycle is announcing a groundbreaking new feature allowing you to obfuscate all the critical mentions of your feature in your code. Specifically, when this functionality is enabled, all DevCycle keys are obfuscated in the code of any web platform (ie React, Next.js, Javascript etc.) to keep their names private.

Next.js users can take this a step further, taking advantage of our built-in Conditional Deferred Rendering feature, which will completely strip out any source code for features the user isn't eligible for, reducing bundle size while also keeping the feature's details private.

What this looks like in real life

Imagine a scenario where a company like Apple is preparing to launch a new feature or product, like they just did with the Vision Pro. They currently go to great lengths to keep all mentions of new products hidden from any source code. That doesn't stop market analysts from finding hints in config files or accessory makers from getting their hands on specs. By implementing Feature Obfuscation, Apple could develop and test a new feature in production without the risk of any plain text mention of that feature showing up anywhere in their source code. Competitors, analysts or the public would only find obfuscated strings when performing code inspection, making the next release completely safe.

How to implement obfuscation in your own project

The process of implementation is quite easy, with the ability to gradually transition from no features obfuscated to eventually having all of your features hidden.

You can follow the documentation, but there are four primary steps to the process:

1. Enable Obfuscation: Modify your project's DevCycle SDK initialization options to include enableObfuscation: true
2. Use the DevCycle CLI: Generate a file with obfuscated constants for your project's variable keys with the obfuscate command

dvc generate types --obfuscate

Which generates an output like this:

// devcycleTypes.ts

/*
key: my-first-variable
created by: Sally Smith
created on: 2024-03-01
*/
export const MY_FIRST_VARIABLE = 'dvc_obfs_3499747d616cfb0ac00bda26273e3577d5508f1ecaf2f1f07a2546' as ObfuscatedKey<'my-first-variable'>

/*
key: my-second-variable
created by: Joe Shmo
created on: 2024-03-01
*/
export const MY_SECOND_VARIABLE = 'dvc_obfs_359f6c73757fe30a9950ce39333c2329915a900893b3fbf164' as ObfuscatedKey<'my-second-variable'>

3. Refactor Code: Replace direct variable key references with the generated constants to ensure that your feature flags are completely hidden within your codebase.

Before:

import { useVariableValue } from '@devcycle/react-client-sdk'

function MyComponent() {
    const myFirstVariable = useVariableValue('my-first-variable', false)
    const mySecondVariable = useVariableValue('my-second-variable', false)
    return <div>{myFirstVariable} {mySecondVariable}</div>
}

After:

import { 
	MY_FIRST_VARIABLE, 
	MY_SECOND_VARIABLE, 
	useVariableValue 
} from './devcycle'

function MyComponent() {
    const myFirstVariable = useVariableValue(MY_FIRST_VARIABLE, false)
    const mySecondVariable = useVariableValue(MY_SECOND_VARIABLE, false)
    return <div>{myFirstVariable} {mySecondVariable}</div>
}

4. Require Obfuscation: Update your project settings in the DevCycle dashboard to require the use of obfuscation to ensure nothing leaks accidentally.

Conclusion

DevCycle's Feature Obfuscation is a novel tool for developers looking to secure their applications and protect sensitive information. It's a capability found nowhere else. By integrating this feature, teams can innovate with confidence, safe in the knowledge that their upcoming features remain concealed from prying eyes.

If you're new to DevCycle you can sign up for a free account and try Feature Obfuscation for yourself.