This weakness occurs when a user interface displays information in a way that contradicts how the system actually processes it, causing users to make decisions…
This weakness occurs when a user interface displays information in a way that contradicts how the system actually processes it, causing users to make decisions based on false assumptions. The mismatch between what the UI shows and what the system does can lead to unintended security consequences — such as granting permissions the user thought they were denying, or uploading data to a location they didn't intend.
UI misrepresentation typically arises when developers fail to align the visual presentation of an action with its actual backend behavior. This can happen through misleading button labels, ambiguous confirmation dialogs, hidden or obscured settings, inconsistent state indicators, or UI elements that suggest one outcome while the system performs another. The user believes they are taking a safe or specific action, but the system interprets their input differently — often because the UI designer and the backend developer did not coordinate on what the interface should communicate.
Users may inadvertently grant overly broad permissions to applications, upload sensitive files to public locations, or enable features they intended to disable. In authentication contexts, a confusing login flow might trick users into entering credentials on an attacker-controlled page they believed was legitimate. In administrative interfaces, unclear permission dialogs can result in privilege escalation or data exposure. The impact ranges from minor user frustration to significant security breaches, depending on what action the UI misrepresents.
# Flask app with misleading permission UI
@app.route('/grant_permission', methods=['POST'])
def grant_permission():
permission = request.form.get('permission')
# UI shows "Allow read-only access" but backend grants full access
if permission == 'read_only':
user.permissions = ['read', 'write', 'delete', 'admin']
return redirect('/dashboard')Why it's vulnerable:
The UI label says "read-only" but the backend assigns full administrative permissions. The user believes they are granting limited access when they are actually granting complete control.
# Flask app with aligned UI and backend behavior
@app.route('/grant_permission', methods=['POST'])
def grant_permission():
permission = request.form.get('permission')
# UI and backend are consistent
if permission == 'read_only':
user.permissions = ['read']
elif permission == 'read_write':
user.permissions = ['read', 'write']
elif permission == 'admin':
user.permissions = ['read', 'write', 'delete', 'admin']
return redirect('/dashboard')<?php
// WordPress-style plugin with misleading checkbox
if ( isset( $_POST['enable_feature'] ) ) {
// UI shows "Enable feature for this site only"
// but actually enables it network-wide
update_option( 'feature_enabled', true );
update_site_option( 'feature_enabled_network', true );
}
?>Why it's vulnerable:
The checkbox label suggests a site-level setting, but the code also enables a network-wide option. The user thinks they are making a limited change when they are actually affecting all sites.
<?php
// WordPress-style plugin with aligned UI and behavior
if ( isset( $_POST['enable_feature_site'] ) ) {
// UI and backend both operate at site level
update_option( 'feature_enabled_site', true );
}
if ( isset( $_POST['enable_feature_network'] ) ) {
// Separate, clearly labeled network option
update_site_option( 'feature_enabled_network', true );
}
?>Review your application's permission dialogs, settings pages, and confirmation screens. Look for cases where the UI label or description does not match the actual code behavior — for example, a checkbox labeled "local only" that also modifies global settings, or a button labeled "preview" that actually publishes content. Check user support tickets or bug reports for complaints about unexpected behavior after granting permissions or changing settings; these often indicate UI misrepresentation.
