破解ReadOnly: 如何在HTML中灵活处理不可编辑字段

今晚务必早点睡

于 2024-05-16 23:45:00 发布

阅读量1.1k

点赞数 29

分类专栏：前端文章标签： html 前端爬虫

本文链接：https://blog.csdn.net/m0_57021623/article/details/138818843

版权

前端专栏收录该内容

35 篇文章 10 订阅

订阅专栏

文章目录

readonly 是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。这种属性通常用于需要向用户显示数据但又不希望用户修改的场合，比如确认订单页面的订单号、预设的日期等。以下是一些关于 readonly 属性的关键点和如何在不同情况下“破除”它的方法：

1. `readonly` 基础

应用于元素：readonly 可以应用于 <input> 和 <textarea> 元素。
用户界面表现：当元素设置为 readonly 时，用户不能更改输入框中的值，但可以选中和复制文本，且表单包含该输入字段的值可以被提交。

HTML示例：

<input type="text" name="username" value="user123" readonly>

2. 如何在客户端破除 `readonly`

JavaScript 修改属性：可以通过JavaScript动态修改元素的 readonly 属性。这可以通过直接在浏览器控制台执行或通过脚本来完成。

document.getElementById('myInput').removeAttribute('readonly');  // 移除readonly属性
document.getElementById('myInput').value = 'new value';  // 修改值

开发者工具：在任何现代浏览器中，开发者工具（通常可以通过按F12键或右键点击页面元素选择“检查”打开）都允许你直接修改HTML元素的属性。你可以手动删除或编辑 readonly 属性，然后更改输入框的值。

3. 如何在服务器端处理 `readonly`

服务器端逻辑通常不会检测一个字段是否被浏览器标记为 readonly。如果服务器端逻辑依赖于前端不修改某些字段的假设，那么这种假设可能会被破坏。因此，重要的安全验证和数据完整性检查应该在服务器端完成，而不仅仅依赖于前端的 readonly 属性。

在处理表单数据时，服务器端必须进行自己的验证和数据完整性检查，以防止恶意用户通过修改前端代码（如移除 readonly 属性）来提交非法数据。以下是几个关键步骤，配合示例代码，来展示如何在服务器端安全处理标记为 readonly 的表单字段：

3.1 验证数据完整性

服务器应该检查接收到的数据是否符合预期的业务逻辑规则，这包括检查数据类型、格式、范围等。

示例：Python Flask应用

假设我们有一个网页表单，其中某些字段（如用户ID）是 readonly 的，用户提交表单时这些字段不应被更改。

from flask import Flask, request

app = Flask(__name__)

@app.route('/submit-form', methods=['POST'])
def submit_form():
    # 假设已知的用户ID
    expected_user_id = "12345"

    # 从表单中获取用户ID
    user_id = request.form.get('user_id')

    # 检查用户ID是否未被更改
    if user_id != expected_user_id:
        return "无效的用户ID", 400

    # 处理其他字段和业务逻辑
    # ...

    return "表单已成功提交", 200

if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，服务器预期接收一个固定的用户ID，如果接收到的ID与预期不符，则返回错误。

3.2 使用服务器端会话存储关键数据

在用户登录或表单初始化时，可以在服务器端会话中存储关键数据（如用户ID、价格、权限级别等），而不是仅仅依赖于前端表单字段。这样即使前端的 readonly 属性被绕过，服务器端仍然控制着关键数据。

示例：使用Flask Session

from flask import Flask, session, request

app = Flask(__name__)
app.secret_key = 'your_secret_key'

@app.route('/initialize-form')
def initialize_form():
    # 假设的用户ID，可能来自数据库或其他验证源
    session['user_id'] = '12345'
    return "表单已初始化"

@app.route('/submit-form', methods=['POST'])
def submit_form():
    # 从会话中获取用户ID
    user_id = session.get('user_id')

    # 从表单中获取可能被用户尝试修改的用户ID
    submitted_user_id = request.form.get('user_id')

    # 校验会话中的用户ID与表单提交的用户ID是否一致
    if submitted_user_id != user_id:
        return "用户ID不匹配", 400

    # 处理其他业务逻辑
    # ...

    return "表单已成功提交", 200

if __name__ == '__main__':
    app.run(debug=True)

3.3 服务器端重要字段的锁定

对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。以下是一个使用Python Flask作为服务器端框架的例子，演示了如何在服务器端处理这种情况：

示例：服务器端验证和计算价格

假设你有一个在线商店，用户在购物车页面提交订单时，前端表单包括商品数量和价格。在这种情况下，服务器应验证价格是否正确，并根据实时数据重新计算总金额。

Python Flask 应用

from flask import Flask, request, jsonify
import sqlite3

app = Flask(__name__)

def get_item_price(item_id):
    """从数据库获取商品价格"""
    conn = sqlite3.connect('store.db')
    cursor = conn.cursor()
    cursor.execute("SELECT price FROM items WHERE id = ?", (item_id,))
    item_price = cursor.fetchone()[0]
    conn.close()
    return item_price

@app.route('/submit-order', methods=['POST'])
def submit_order():
    # 从请求中获取商品ID和用户提交的数量
    item_id = request.form.get('item_id')
    submitted_quantity = int(request.form.get('quantity'))

    # 从数据库获取正确的商品价格
    correct_price = get_item_price(item_id)

    # 从请求中获取用户提交的价格
    submitted_price = float(request.form.get('price'))

    # 计算应该的总金额
    expected_total = correct_price * submitted_quantity

    # 比较用户提交的价格与计算出的正确价格
    if not submitted_price == expected_total:
        return jsonify({"error": "价格验证失败，订单无法处理"}), 400

    # 如果价格正确，处理订单逻辑
    # ...（这里可以是创建订单记录、减库存等操作）

    return jsonify({"success": "订单已成功提交", "total_price": expected_total}), 200

if __name__ == '__main__':
    app.run(debug=True)

代码解释：

获取商品价格：get_item_price 函数从数据库查询商品的当前价格。这确保了即使用户试图通过修改前端代码来更改价格，服务器端仍使用最新的、正确的价格。
订单提交处理：在 submit_order 函数中，我们首先获取用户提交的商品ID、数量和价格。然后，我们从数据库获取该商品的正确价格，并计算应该的总金额。
价格验证：服务器比较计算出的总金额与用户提交的价格是否一致。如果不一致，返回错误消息；如果一致，可以继续处理订单。

这种方法通过确保关键的财务数据（如价格）在服务器端进行管理和验证，大大减少了因前端数据篡改而导致的风险。服务器端的这种验证对于保护商业操作非常关键，尤其是在涉及金钱交易的场景中。

总之，虽然 readonly 属性在前端可以帮助减少用户误操作，但从安全和数据完整性的角度来看，服务器端必须独立验证所有关键数据。这些策略确保了即便前端控制被绕过，系统的完整性和安全性仍得到保障。

4. 自动化测试中绕过 `readonly`

在使用如Selenium这样的自动化测试工具时，可能需要绕过 readonly 属性来模拟用户输入场景。如前所述，可以使用JavaScript来修改或删除 readonly 属性。

# 假设已经初始化了Selenium的WebDriver
element = driver.find_element_by_id("myInput")
driver.execute_script("arguments[0].removeAttribute('readonly');", element)
element.send_keys("new automated input")

5. 安全性和实用性考虑

虽然技术上可以绕过 readonly，但在实际应用中，如果数据字段被设置为 readonly，通常有其背后的理由，比如保护数据的完整性。在企业环境或符合规定的场景中，随意改变这些设置可能会导致安全漏洞、数据不一致或违反合规性要求。

总之，readonly 是一个有用的前端工具，用于在用户界面中显示但限制修改某些数据。然而，真正的安全和数据验证应该在服务器端进行，以避免依赖于可以在客户端修改的属性。

6.用法拓展

self.driver.execute_script('arguments[0].removeAttribute(arguments[1]);', element, attribute)

这行代码是用于在使用Selenium自动化测试框架时，通过JavaScript来操作网页元素。具体来说，这段代码是用来移除一个HTML元素的某个属性。这可以用于修改那些通过HTML属性控制的行为，比如移除 readonly、disabled 等属性。

代码解析

self.driver：这是Selenium WebDriver的实例，用于控制浏览器。
.execute_script()：这是WebDriver的一个方法，它允许你执行原生JavaScript代码。
'arguments[0].removeAttribute(arguments[1]);'：这是将要在页面上执行的JavaScript代码。arguments[0] 和 arguments[1] 是此方法的参数占位符。
element：这是你想要操作的HTML元素，通常是通过Selenium的元素选择方法（如 find_element_by_id()、find_element_by_css_selector() 等）获取的。
attribute：这是你想要从元素中移除的属性名，例如 "readonly"、"disabled" 等。

应用示例

假设你想移除一个输入框的 readonly 属性，可以这样写：

from selenium import webdriver

# 启动Chrome浏览器
driver = webdriver.Chrome()

# 打开目标网页
driver.get("http://example.com")

# 定位到带有readonly属性的输入框
element = driver.find_element_by_id("myInput")

# 移除readonly属性
driver.execute_script('arguments[0].removeAttribute(arguments[1]);', element, 'readonly')

# 现在可以输入值了
element.send_keys("Hello, world!")

# 最后，关闭浏览器
driver.quit()